TypeScript(타입스크립트)란? 쓰는 이유부터 설치, 기본 문법까지

TypeScript(타입스크립트)는 마이크로소프트가 만든 언어로, 자바스크립트에 ‘타입’을 더해 코드를 실행하기 전에 오류를 미리 잡아줍니다. 기존 자바스크립트 문법을 그대로 쓸 수 있고 자동완성과 협업 효율이 좋아 요즘 프론트엔드의 사실상 표준이 됐으며, 2026년 7월에는 빌드 속도가 약 10배 빨라진 TypeScript 7.0이 정식 출시됐습니다.

TypeScript란?

한 줄로 정리하면 “타입 검사 기능이 붙은 자바스크립트“입니다.

타입스크립트는 자바스크립트의 상위 집합(superset)입니다. 자바스크립트 코드는 그 자체로 이미 올바른 타입스크립트 코드라서, 기존 .js 파일의 확장자를 .ts로 바꾸기만 해도 일단 동작합니다. 여기에 변수나 함수에 “이건 숫자야”, “이건 문자열이야” 같은 타입 정보를 적어주면, 에디터와 컴파일러가 잘못된 사용을 미리 찾아내 줍니다.

중요한 점은 브라우저나 Node.js가 실행하는 건 결국 자바스크립트라는 것입니다. 타입스크립트 코드는 tsc라는 컴파일러를 거쳐 자바스크립트로 바뀐 뒤 실행되고, 이 과정에서 타입 정보는 모두 지워집니다.

ts

// TypeScript 코드 (hello.ts)
interface Person {
  name: string;
  age: number;
}

const person: Person = { name: "Alice", age: 30 };

js

// 컴파일 후 JavaScript 코드 (hello.js)
const person = { name: "Alice", age: 30 };

즉 타입은 개발하는 동안에만 도움을 주는 안전장치이고, 실제 실행 결과에는 영향을 주지 않습니다.

자바스크립트 vs 타입스크립트 차이

항목	JavaScript	TypeScript
타입 방식	동적 타입 (실행 중에 결정)	정적 타입 (작성할 때 지정)
오류 발견 시점	코드를 실행해야 발견	저장하는 순간 에디터에서 발견
실행 방법	브라우저, Node.js에서 바로 실행	자바스크립트로 변환 후 실행
자동완성	제한적	타입 기반으로 정확함
학습 난이도	낮음	JS를 알면 중간 정도
파일 확장자	.js, .jsx	.ts, .tsx

말로만 보면 차이가 잘 와닿지 않으니, 같은 함수를 두 언어로 비교해 보겠습니다.

js

// JavaScript
const sumNumber = (a, b) => {
  return a + b;
};

sumNumber(1, 2);       // 3
sumNumber(100);        // NaN (100 + undefined)
sumNumber("a", "b");   // "ab"

숫자를 더하려고 만든 함수인데, 인자를 하나만 넘기면 NaN이 나오고 문자열을 넘기면 글자를 이어 붙입니다. 문제는 이 모든 게 에러 없이 조용히 실행된다는 점입니다. 실제 서비스에서 이런 값이 화면에 찍히기 전까지는 아무도 모를 수 있습니다.

ts

// TypeScript
const sumNumber = (a: number, b: number): number => {
  return a + b;
};

sumNumber(1, 2);       // 3
sumNumber(100);        // ❌ 오류: 인수가 2개 필요한데 1개를 받았습니다
sumNumber("a", "b");   // ❌ 오류: string은 number에 할당할 수 없습니다

타입스크립트에서는 코드를 실행하기도 전에, 작성하는 순간 에디터에 빨간 줄이 그어집니다.

타입스크립트를 쓰는 이유 4가지

1. 실행 전에 버그를 잡아줍니다
2017년 발표된 연구 “To Type or Not to Type”에서는 공개 자바스크립트 프로젝트의 실제 버그를 분석한 결과, 약 15%는 타입스크립트 같은 정적 타입 도구로 미리 막을 수 있었다고 밝혔습니다. 오타, 잘못된 인자, undefined 접근처럼 사소하지만 자주 터지는 실수가 여기에 해당합니다.

2. 자동완성 덕분에 개발이 빨라집니다
실무 개발자들이 가장 많이 꼽는 이유입니다. 객체 이름 뒤에 점만 찍어도 어떤 속성이 있는지, 함수에 어떤 인자를 넣어야 하는지 에디터가 바로 알려줍니다. 문서를 찾아보거나 다른 파일을 열어볼 일이 확실히 줄어듭니다.

3. 협업과 유지보수가 쉬워집니다
어제 만든 함수는 사용법이 기억나지만, 한 달 전에 만든 함수나 동료가 만든 함수는 다시 열어봐야 합니다. 타입이 붙어 있으면 함수 선언만 봐도 무엇을 넣고 무엇이 나오는지 알 수 있어서, 코드 자체가 문서 역할을 합니다. 팀 인원이 많아질수록 이 차이는 커집니다.

4. 코드 수정(리팩터링)이 안전해집니다
API 응답 필드 이름 하나를 바꿔도, 그 필드를 쓰는 모든 곳에 오류가 표시돼 빠짐없이 고칠 수 있습니다. 저도 예전에 API 응답 필드가 userName에서 username으로 바뀐 걸 모르고 배포했다가 화면 일부가 빈칸으로 나온 적이 있는데, 타입스크립트였다면 저장하는 순간 빨간 줄로 알려줬을 문제였습니다.

타입스크립트 단점도 알고 시작하세요

장점만 있는 도구는 없습니다. 시작 전에 아래 부분은 감안하시는 게 좋습니다.

• 러닝 커브: 기본 타입은 금방 익히지만, 제네릭, 유틸리티 타입, 타입 좁히기 같은 개념은 처음에 헷갈릴 수 있습니다.
• 초기 설정: tsconfig.json 설정, 빌드 도구 연동 등 자바스크립트보다 준비할 게 조금 더 있습니다.
• 코드 양 증가: 타입 정의를 따로 적어야 해서 작은 스크립트에서는 오히려 번거롭게 느껴질 수 있습니다.
• 외부 라이브러리 타입 문제: 오래된 라이브러리는 타입 정보가 없어서 @types/라이브러리명 패키지를 따로 설치하거나 직접 타입을 선언해야 할 때가 있습니다.

예전에는 “컴파일이 느리다”는 것도 대표적인 단점이었는데, 이 부분은 TypeScript 7.0에서 크게 개선됐습니다.

TypeScript 7.0, 무엇이 달라졌나 (2026 최신)

2026년 7월, 마이크로소프트는 TypeScript 7.0을 정식 출시했습니다. 이번 버전의 가장 큰 변화는 컴파일러를 Go 언어로 새로 작성했다는 점입니다. 참고로 TypeScript 6.0이 기존 방식(TypeScript로 작성된 컴파일러)의 마지막 버전입니다.

항목	TypeScript 6.0	TypeScript 7.0
컴파일러 작성 언어	TypeScript (JavaScript)	Go
전체 빌드 속도	기준	약 8~12배 빠름
strict 모드	직접 켜야 함	기본값
기본 target	이전 버전 기준	esnext
사용 중단 기능	경고	오류
프로그래밍 API	있음	7.1에서 제공 예정

입문자와 실무자가 알아둘 점

• 새로 시작한다면 그냥 최신 버전을 설치하시면 됩니다. strict가 기본으로 켜져 있어서 처음부터 좋은 습관을 들이기에 오히려 유리합니다.
• 기존 프로젝트를 올린다면 6.0으로 먼저 업그레이드해서 경고를 모두 정리한 뒤 7.0으로 넘어가는 순서를 공식적으로 권장합니다. 6.0의 경고가 7.0에서는 오류가 되기 때문입니다.
• Astro, Vue, Svelte, MDX 등을 쓰는 경우, 7.0에는 아직 안정적인 프로그래밍 API가 없어서 이 도구들이 당분간 TypeScript 6을 필요로 할 수 있습니다. 설치 전에 사용하는 프레임워크의 공식 문서를 한 번 확인해 주세요.

타입스크립트 설치와 첫 실행 방법

1단계: Node.js 설치 확인

터미널에서 아래 명령어로 Node.js가 설치되어 있는지 확인합니다. 버전 번호가 나오지 않으면 nodejs.org에서 LTS 버전을 먼저 설치해 주세요.

bash

node -v
npm -v

2단계: 프로젝트 폴더 만들고 타입스크립트 설치

bash

mkdir ts-start
cd ts-start
npm init -y
npm install --save-dev typescript

전역 설치(-g)보다 프로젝트마다 설치하는 방식을 추천합니다. 프로젝트별로 버전을 다르게 쓸 수 있어서 나중에 충돌이 적습니다. 앞에서 말씀드린 이유로 TypeScript 6이 필요하다면 npm install --save-dev typescript@6으로 설치하시면 됩니다.

3단계: tsconfig.json 만들기

bash

npx tsc --init

프로젝트 폴더에 tsconfig.json 설정 파일이 생깁니다. 주요 옵션은 아래에서 따로 정리했습니다.

4단계: 첫 타입스크립트 파일 작성

hello.ts 파일을 만들고 아래 코드를 넣습니다.

ts

function greet(name: string): string {
  return `안녕하세요, ${name}님!`;
}

console.log(greet("타입스크립트"));

5단계: 컴파일하고 실행하기

bash

npx tsc
node hello.js

npx tsc를 실행하면 hello.js 파일이 생기고, node hello.js로 실행하면 인사말이 출력됩니다.

꼭 알아야 할 기본 문법 5가지

1. 기본 타입

ts

let userName: string = "홍길동";
let age: number = 30;
let isAdmin: boolean = false;

사실 타입스크립트는 똑똑해서, let age = 30처럼 타입을 안 적어도 알아서 number로 추론합니다. 그래서 변수보다는 함수 매개변수와 반환값에 타입을 적는 게 실무의 일반적인 방식입니다.

2. 배열과 객체

ts

let scores: number[] = [90, 85, 100];
let tags: string[] = ["js", "ts"];

let user: { name: string; age: number } = {
  name: "홍길동",
  age: 30,
};

3. interface와 type

객체의 모양을 이름 붙여 재사용할 때 씁니다.

ts

interface User {
  name: string;
  age: number;
  email?: string; // ?는 있어도 되고 없어도 되는 선택 속성
}

type Point = {
  x: number;
  y: number;
};

구분	interface	type
주 용도	객체 구조 정의	객체, 유니온, 기본 타입 등 모든 타입
확장 방법	extends	& (교차 타입)
같은 이름 재선언	가능 (자동 병합)	불가능

처음에는 객체는 interface, 그 외에는 type으로 구분해서 쓰셔도 충분합니다.

4. 유니온 타입

“이것 또는 저것”을 표현할 때 씁니다.

ts

type Status = "loading" | "success" | "error";

let current: Status = "success";
current = "done"; // ❌ 오류: 정해진 세 값만 가능

오타가 나기 쉬운 상태값을 관리할 때 특히 유용합니다.

5. 제네릭 맛보기

타입을 “나중에 정하는 변수”처럼 쓰는 문법입니다.

ts

function getFirst<T>(arr: T[]): T {
  return arr[0];
}

const firstNum = getFirst([1, 2, 3]);       // number로 추론
const firstStr = getFirst(["a", "b", "c"]); // string으로 추론

처음부터 완벽히 이해하지 않아도 괜찮습니다. 라이브러리를 쓰다 보면 자연스럽게 익숙해지는 문법입니다.

tsconfig.json 핵심 옵션 정리

tsc --init으로 만든 파일에는 옵션이 많지만, 입문 단계에서는 아래 정도만 알아도 충분합니다.

json

{
  "compilerOptions": {
    "target": "es2022",
    "module": "esnext",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "skipLibCheck": true
  },
  "include": ["src"]
}

옵션	역할
target	어떤 버전의 자바스크립트로 변환할지 지정
module	import/export 모듈 방식 지정
strict	엄격한 타입 검사 전체 켜기 (꼭 켜두는 걸 추천)
outDir	변환된 .js 파일을 저장할 폴더
rootDir	.ts 원본 파일이 있는 폴더
include	컴파일 대상 파일 범위
skipLibCheck	외부 라이브러리 타입 검사 생략 (빌드 속도 향상)
noEmit	타입 검사만 하고 .js 파일은 만들지 않음 (Vite, Next.js 등에서 주로 사용)

React, Next.js, Vite로 프로젝트를 만들면 tsconfig.json이 이미 알맞게 설정된 상태로 생성되니, 처음부터 직접 다 맞출 필요는 없습니다.

타입스크립트 공부 순서 추천

1. 공식 플레이그라운드에서 맛보기: typescriptlang.org/play 에 접속하면 설치 없이 브라우저에서 바로 코드를 작성하고 변환 결과를 확인할 수 있습니다.
2. 공식 핸드북 읽기: typescriptlang.org/docs/handbook 에서 기본 타입부터 제네릭까지 순서대로 정리되어 있습니다.
3. 작은 기존 JS 프로젝트를 TS로 바꿔보기: 파일 하나씩 확장자를 .ts로 바꾸고 오류를 고쳐보는 게 가장 빨리 느는 방법입니다.
4. React나 Next.js 프로젝트에 적용하기: npx create-next-app@latest로 만들면 타입스크립트가 기본 설정으로 들어갑니다.
5. 심화 도서로 다지기: 《이펙티브 타입스크립트》, 《우아한 타입스크립트 with 리액트》는 실무 개발자들이 많이 추천하는 책입니다.

자주 묻는 질문 (FAQ)

Q1. 자바스크립트를 먼저 배워야 하나요?
네, 기본 문법은 먼저 익히시는 게 좋습니다. 타입스크립트는 자바스크립트 위에 타입을 얹은 언어라, 변수, 함수, 배열, 객체, 비동기 처리 정도를 알고 시작하면 훨씬 수월합니다. 자바스크립트 기초가 잡혀 있다면 타입스크립트 기본 문법은 1~2주면 충분히 익힐 수 있습니다.

Q2. 타입스크립트는 무료인가요?
완전히 무료입니다. 마이크로소프트가 오픈소스로 공개하고 있어서 개인, 회사 프로젝트 모두 비용 없이 사용할 수 있습니다.

Q3. 브라우저에서 .ts 파일을 바로 실행할 수 있나요?
브라우저는 타입스크립트를 직접 실행하지 못해서 자바스크립트로 변환해야 합니다. 다만 최신 Node.js에서는 타입 표기만 지우고 .ts 파일을 바로 실행하는 기능을 지원하기 시작했습니다. 이 방식은 enum처럼 자바스크립트 코드로 바뀌어야 하는 일부 문법은 지원하지 않으니, 본격적인 프로젝트에서는 tsc나 Vite 같은 빌드 도구를 쓰시는 게 안전합니다.

Q4. 지금 시작하면 TypeScript 7로 배워도 되나요?
네, 문법은 6.0과 거의 같아서 배우는 내용에는 차이가 없습니다. 오히려 strict 모드가 기본으로 켜져 있어 처음부터 올바른 습관을 들이기에 좋습니다. 다만 Vue, Svelte, Astro 같은 도구를 함께 쓴다면 해당 도구가 7.0을 지원하는지 먼저 확인해 주세요.

Q5. 기존 자바스크립트 프로젝트를 한 번에 바꿔야 하나요?
아닙니다. 타입스크립트는 .js와 .ts 파일을 함께 쓸 수 있어서, tsconfig.json에 "allowJs": true를 켜고 파일 하나씩 천천히 바꿔나가면 됩니다. 실제로 많은 회사가 이런 점진적 전환 방식으로 도입하고 있습니다.

함께 보면 좋은 글

CI/CD란 무엇인가ㅣ2026년 최신 도구까지 정리

Apidog 뭐길래? 설치부터 사용법까지 총정리

Flask 사용법 설치부터 라우팅까지 쉽게 배우기

Raycast 사용법 Mac Windows 둘 다 정리했습니다

AOS(Animate On Scroll) 사용법 총정리 (React 포함)