실행 가능한 TypeScript 문서: 타입스크립트란

Q: 타입스크립트를 쉽게 설명하면 무엇인가요?

타입스크립트는 타입 표기(type annotation)를 더한 JavaScript입니다. let count: number = 0이라고 쓰면 컴파일러가 count를 항상 숫자로만 쓰는지 검사합니다. 그런 다음 표기를 지우고 평범한 JavaScript를 출력하므로, JavaScript가 실행되는 곳이라면 어디서든 결과물을 실행할 수 있습니다.

타입스크립트란 정적 타입을 더한 JavaScript입니다. 타입스크립트(TypeScript)에서는 변수, 매개변수, 반환값에 타입 표기를 붙이고, TypeScript 컴파일러가 프로그램이 실행되기 전에 이를 검사한 뒤 타입을 지운 평범한 JavaScript를 출력합니다. 그 JavaScript는 브라우저, Node.js, Deno, Bun 등 JavaScript가 실행되는 곳이라면 어디서든 실행됩니다.

작은 TypeScript 프로그램입니다. Run을 눌러 보세요.

interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const ada: User = { name: "Ada", age: 36 };
console.log(describe(ada));

const scores: number[] = [90, 72, 85];
const total = scores.reduce((sum, s) => sum + s, 0); // total is inferred as number
console.log(total / scores.length);

출력:

Ada is 36 years old
82.33333333333333

콜론 뒤에 붙은 부분(: string, : User, : number[])과 interface를 빼면 이 코드는 JavaScript입니다. 이렇게 더한 부분은 각 값이 무엇이 될 수 있는지 컴파일러에게 알려 줍니다. total에는 표기가 없다는 점에 주목하세요. TypeScript가 알아서 숫자라고 판단합니다. 대부분의 TypeScript 코드는 함수의 경계에만 타입을 표기하고 나머지는 컴파일러의 추론에 맡깁니다.

타입 검사기가 잡아내는 것

타입 표기의 목적은 사용자가 실수를 마주치기 전에, 코드를 작성하는 동안 실수가 드러나게 하는 것입니다. 이 블록을 실행하고 출력을 읽어 보세요.

// This does not compile: two mistakes the compiler finds before anything runs.
interface User {
    name: string;
    age: number;
}

function describe(user: User): string {
    return `${user.name} is ${user.age} years old`;
}

const grace: User = { name: "Grace", age: "85" };
console.log(describe({ name: "Linus" }));

프로그램은 시작조차 하지 않습니다. 대신 컴파일러가 오류 두 개를 출력합니다.

index.ts(11,38): error TS2322: Type 'string' is not assignable to type 'number'.
index.ts(12,22): error TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'User'.

각 오류에는 파일, 줄과 열, 오류 코드(TS2322), 무엇이 잘못되었는지가 나옵니다. 평범한 JavaScript였다면 두 줄 모두 실행되고, 두 번째 줄은 아무 경고 없이 Linus is undefined years old를 출력했을 것입니다. VS Code 같은 에디터에서는 같은 오류가 입력하는 동안 빨간 밑줄로 나타나고, user에 정확히 name과 age가 있다는 것을 아는 자동 완성도 함께 제공됩니다.

검사기가 잡아내는 대표적인 버그:

속성이나 메서드 이름의 오타(user.nmae, list.lenght).
함수에 인수를 너무 적게 또는 너무 많이 넘기거나, 잘못된 타입의 인수를 넘기는 경우.
null이나 undefined일 수 있는 값을 먼저 확인하지 않고 쓰는 경우.
코드가 완전성 검사를 할 때 "loading" | "done" | "error" 같은 유니언의 한 경우를 처리하지 않은 경우.
의존하는 함수의 시그니처가 바뀌어서 깨지는 코드.

타입은 런타임에 사라진다

TypeScript의 타입은 컴파일 시점에만 존재합니다. 컴파일러는 타입을 검사한 다음 제거합니다. 출력된 JavaScript에는 타입 표기도 인터페이스도 없고, 손으로 작성한 JavaScript와 똑같이 실행됩니다.

이 입력은:

function double(n: number): number {
    return n * 2;
}

이런 출력이 됩니다.

function double(n) {
    return n * 2;
}

그래서 TypeScript는 프로그램이 실행되는 동안 들어오는 값을 검사할 수 없습니다. 아래에서 JSON 텍스트는 자신이 User라고 주장하고, 컴파일러는 그 주장을 믿을 수밖에 없으며, 실행 중에도 아무것도 불평하지 않습니다.

interface User {
    name: string;
    age: number;
}

const json = '{"name": "Ada", "age": "thirty-six"}';
const user: User = JSON.parse(json); // JSON.parse returns any, so this is accepted

console.log(typeof user.age); // string, even though the type says number
console.log(user.age + 1);    // string concatenation, not addition

출력:

string
thirty-six1

프로그램 밖에서 들어오는 데이터(API 응답, 폼 입력, 파일)에는 런타임 검사가 필요합니다. 예를 들어 값을 살펴보는 타입 가드 함수를 쓰면, TypeScript가 그 검사를 믿고 타입을 좁혀 줍니다.

누가 왜 TypeScript를 만들었나

TypeScript는 Microsoft에서 만들어졌고, C#의 설계자인 Anders Hejlsberg가 설계를 이끌었습니다. 2012년 10월 0.8 버전으로 공개되었고 2014년 4월에 1.0이 나왔습니다. Apache 2.0 라이선스의 오픈 소스이며 GitHub에서 개발됩니다. GitHub의 월간 기여자 수 기준으로 TypeScript는 2025년 8월 Python과 JavaScript를 제치고 GitHub에서 가장 많이 쓰이는 언어가 되었습니다.

동기는 대규모 JavaScript 코드베이스였습니다. JavaScript에는 "이 함수는 user 객체를 받는다"라고 말할 방법이 없어서, 속성 이름을 바꾸거나 함수를 수정하려면 코드베이스 전체를 검색하고 테스트가 모든 호출부를 다루기를 바라는 수밖에 없었습니다. TypeScript는 JavaScript와의 완전한 호환성을 유지하면서 그 정보를 더합니다.

상위 집합입니다. 올바른 JavaScript는 올바른 TypeScript 문법이므로, 프로젝트를 파일 하나씩 옮길 수 있습니다.
JavaScript를 따릅니다. enum과 namespace 같은 초기의 몇 가지 추가 기능을 빼면 TypeScript는 자체 런타임 기능을 더하지 않습니다. 새 문법은 JavaScript 표준에서 옵니다.
타입은 런타임 비용이 없습니다. 지워지기 때문에 출력은 손으로 작성한 JavaScript만큼 빠릅니다.

현재 메이저 버전은 TypeScript 7입니다. 컴파일러가 Go로 다시 작성된 네이티브 프로그램이 되었고, 이전의 JavaScript 기반 컴파일러보다 대규모 프로젝트의 타입 검사가 약 10배 빠릅니다. 무엇이 바뀌었는지는 TypeScript 7 페이지에서 다룹니다.

TypeScript는 어디에 쓰이나: 프론트엔드와 백엔드

TypeScript는 프론트엔드와 백엔드 양쪽에서 JavaScript와 같은 소프트웨어를 만드는 데 쓰입니다. 출력이 JavaScript이므로 TypeScript는 JavaScript가 가는 곳이면 어디든 갑니다.

어디서	TypeScript가 실행되는 방식
브라우저 프론트엔드	빌드 도구(Vite, webpack, esbuild)가 JavaScript로 컴파일합니다. React, Angular, Vue, Svelte 모두 지원하며, Angular 프로젝트는 기본이 TypeScript입니다.
Node.js 서버와 스크립트	`tsc`로 컴파일해 `.js` 출력을 실행하거나, `.ts` 파일을 바로 실행합니다. 최신 Node.js는 타입을 직접 제거합니다.
Deno	`.ts` 파일을 바로 실행하고, `deno check`로 타입을 검사합니다.
Bun	`.ts` 파일을 타입 검사 없이 바로 실행합니다.
데스크톱과 모바일	Electron, React Native 같은 도구가 TypeScript를 받아들입니다.

한 언어로 웹 앱의 양쪽을 모두 다룰 수 있어서, 많은 팀이 서버와 브라우저 코드 사이에서 타입 정의(예를 들어 API 응답의 형태)를 공유합니다.

TypeScript 코드가 JavaScript가 되는 과정

서로 다른 두 가지 작업이 있고, 각각을 다른 도구가 맡습니다.

타입 검사. TypeScript 컴파일러만 할 수 있으며, 보통 tsc 명령으로 실행합니다(Deno의 deno check는 같은 컴파일러의 복사본을 실행합니다). .ts 파일을 읽고 오류를 보고하며, 기본적으로 .js 파일도 씁니다.
타입 제거. tsc로도 할 수 있고, 타입 검사를 아예 건너뛰는 더 빠른 도구로도 할 수 있습니다. esbuild, SWC, Babel, 그리고 Node.js, Deno, Bun에 내장된 타입 제거 기능이 그렇습니다.

흔한 구성은 코드 실행에는 빠른 도구를 쓰고, 에디터와 CI에서는 tsc --noEmit(검사만 하고 아무것도 쓰지 않음)을 쓰는 것입니다. tsc 설치와 .ts 파일 실행은 이 장에 각각 별도 페이지가 있습니다.

예제 하나로 보는 핵심 기능

일상적인 TypeScript는 적은 수의 기능만 씁니다. 이 블록에 주요 기능이 모여 있습니다.

type Status = "active" | "banned"; // a union of two string values

interface Account {
    id: number;
    name: string;
    status: Status;
    email?: string; // optional: may be missing
}

// A generic function: T is filled in from the argument
function first<T>(items: T[]): T | undefined {
    return items[0];
}

const accounts: Account[] = [
    { id: 1, name: "Ada", status: "active", email: "ada@example.com" },
    { id: 2, name: "Linus", status: "banned" },
];

const account = first(accounts); // inferred as Account | undefined
if (account !== undefined) {
    console.log(account.name, account.email ?? "no email"); // narrowed to Account
}

for (const a of accounts) {
    console.log(a.status === "active" ? `${a.name} can log in` : `${a.name} is banned`);
}

출력:

Ada ada@example.com
Ada can log in
Linus is banned

타입 표기 (name: string)는 변수, 매개변수, 속성, 반환값이 무엇을 담는지 밝힙니다.
타입 추론 은 생략한 타입을 채웁니다. account는 first가 반환하는 값에서 타입을 얻습니다.
인터페이스와 타입 별칭 (interface Account, type Status)은 데이터의 형태에 이름을 붙입니다.
유니언 타입 ("active" | "banned", T | undefined)은 여러 가지 중 하나인 값을 나타냅니다.
좁히기(narrowing): account !== undefined 같은 검사 뒤에는 블록 안에서 어떤 경우인지 컴파일러가 압니다.
선택적 속성 (email?: string)은 없을 수도 있으므로 타입에 undefined가 포함됩니다.
제네릭 (first<T>)은 하나의 함수나 타입이 여러 타입과 함께 동작하면서도 그 관계를 유지하게 합니다. Account 배열이 들어가면 Account가 나옵니다.

JavaScript를 먼저 배워야 할까?

도움은 되지만 둘을 함께 배울 수도 있습니다. TypeScript 코드가 런타임에 어떻게 동작하는지(변수, 함수, 객체, 배열, 프로미스, 클래스)는 전부 JavaScript이고, TypeScript는 그 값들을 설명하는 층을 더할 뿐입니다. 이미 JavaScript를 안다면 새로 배울 것은 타입 시스템, 즉 타입 표기, 인터페이스, 유니언, 제네릭, 좁히기입니다. 둘 다 처음이라면 JavaScript의 값과 함수 기초부터 시작해 진행하면서 타입을 더하세요. 컴파일러의 오류 메시지는 값을 잘못 쓴 바로 그 줄을 가리키므로 좋은 선생님이 됩니다.

TypeScript를 배우는 실용적인 순서: 설치하고 첫 파일을 실행한 뒤, 기본 타입과 객체 타입을 배우고, 이어서 유니언 타입과 좁히기, 그다음 함수와 제네릭으로 넘어가세요. 이것으로 대부분의 애플리케이션 코드를 다룰 수 있습니다.

자주 묻는 질문

타입스크립트를 쉽게 설명하면 무엇인가요?

타입스크립트는 타입 표기(type annotation)를 더한 JavaScript입니다. let count: number = 0이라고 쓰면 컴파일러가 count를 항상 숫자로만 쓰는지 검사합니다. 그런 다음 표기를 지우고 평범한 JavaScript를 출력하므로, JavaScript가 실행되는 곳이라면 어디서든 결과물을 실행할 수 있습니다.

타입스크립트는 프론트엔드인가요, 백엔드인가요?

둘 다입니다. 타입스크립트는 JavaScript로 컴파일되므로 JavaScript가 가는 곳이면 어디든 갑니다. 브라우저 프론트엔드(React, Angular, Vue, Svelte), Node.js, Deno, Bun 위의 서버, 명령줄 도구, Electron으로 만든 데스크톱 앱까지요. 타입 검사는 어디서든 똑같이 동작합니다.

타입스크립트는 프로그래밍 언어인가요, 프레임워크인가요?

프로그래밍 언어입니다. JavaScript의 상위 집합(superset)이어서 모든 JavaScript 프로그램은 올바른 TypeScript 문법이고, TypeScript는 그 위에 타입 시스템을 더합니다. 프레임워크나 라이브러리가 아닙니다. 타입 표기는 컴파일할 때 지워지고 프로그램에 코드를 한 줄도 더하지 않습니다.

타입스크립트는 누가 만들었나요?

Microsoft입니다. C#을 설계한 Anders Hejlsberg가 설계를 이끌었습니다. TypeScript는 2012년 10월 0.8 버전으로 공개되었고, Apache 2.0 라이선스의 오픈 소스입니다.

타입스크립트는 런타임에 타입을 검사하나요?

아니요. 모든 타입 검사는 컴파일 시점에 일어나고, 타입은 JavaScript 출력에서 지워집니다. 프로그램 밖에서 들어온 데이터(API 응답, 폼, JSON 파일)의 형태가 틀려도 TypeScript는 실행 중에 알아챌 수 없습니다. 그런 데이터는 타입 가드 같은 런타임 코드로 검증하세요.