Ch 01. 왜 TypeScript인가

TypeScript는 이제 "선택"이 아닙니다. 2024년 GitHub 통계에서 TypeScript는 전체 저장소 기준 사용 언어 1위에 올랐습니다. Stack Overflow 개발자 설문에서는 응답자의 78%가 TypeScript를 사용 중이거나 사용할 의향이 있다고 답했습니다.

숫자보다 더 중요한 건 현장의 목소리입니다. 규모 있는 프론트엔드 팀에서 JavaScript로만 작업하는 곳을 찾기가 오히려 어렵습니다.

타입이 없으면 생기는 일

간단한 예제를 봅니다.

// JavaScriptfunction getUser(id) {  return fetch(`/api/users/${id}`).then(res => res.json());}getUser("123abc");   // 의도한 건 숫자인데...getUser(null);       // 이건 버그인데 컴파일러는 모름

런타임에 가서야 오류가 드러납니다. 팀이 크고 코드베이스가 커질수록 이런 버그는 찾기 어렵습니다.

TypeScript를 쓰면 오류가 코드를 작성하는 순간 보입니다.

// TypeScriptasync function getUser(id: number): Promise<User> {  const res = await fetch(`/api/users/${id}`);  return res.json();}getUser("123abc");  // 오류: Argument of type 'string' is not assignable to parameter of type 'number'getUser(null);      // 오류: Argument of type 'null' is not assignable to parameter of type 'number'

에디터가 저장 버튼을 누르기도 전에 빨간 줄을 그어줍니다.

AI 코드 생성과의 시너지

GitHub Copilot, Claude, ChatGPT 같은 AI 코드 생성 도구가 대중화되면서 TypeScript의 가치는 더 높아졌습니다.

AI가 코드를 생성할 때 타입 정보를 컨텍스트로 활용합니다. 함수의 시그니처, 인터페이스, 제네릭 제약이 명확할수록 AI가 올바른 코드를 만들어낼 확률이 높습니다.

// 타입 정보가 풍부하면 AI도 정확한 코드를 생성interface OrderSummary {  orderId: string;  items: Array<{ productId: string; quantity: number; price: number }>;  totalAmount: number;  discountRate?: number;  status: "pending" | "confirmed" | "shipped" | "delivered";}// AI에게 "주문 총액에 할인을 적용하는 함수 작성해줘"라고 하면// OrderSummary 타입을 보고 정확한 구현을 제안function applyDiscount(order: OrderSummary): number {  const discount = order.discountRate ?? 0;  return order.totalAmount * (1 - discount);}

타입이 없는 JavaScript였다면 AI는 order 객체 구조를 추측해야 합니다. TypeScript에서는 추측이 아닌 사실을 바탕으로 코드를 생성합니다.

점진적 도입이 가능하다

TypeScript의 큰 장점은 JavaScript 파일을 그대로 둔 채 점진적으로 전환할 수 있다는 점입니다. 기존 .js 파일을 .ts로 바꾸고 타입을 하나씩 추가해나가면 됩니다.

tsconfig.json의 allowJs: true 옵션을 사용하면 같은 프로젝트에서 .js와 .ts가 공존할 수 있습니다.

{  "compilerOptions": {    "allowJs": true,    "checkJs": false,    "strict": true  }}

처음부터 전부 바꿀 필요가 없습니다. 새로 작성하는 파일부터 TypeScript로 시작하면 됩니다.

채택률이 말해주는 것

주요 오픈소스 프로젝트의 TypeScript 전환 시점을 보면 흐름이 보입니다.

대형 오픈소스들이 TypeScript로 이동했다는 건 생태계 전체가 그 방향을 지지한다는 의미입니다.

정리

TypeScript를 배우는 이유는 세 가지입니다.

첫째, 버그를 코드 작성 시점에 잡습니다. 런타임이 아닌 에디터에서 오류를 발견합니다.

둘째, 코드가 문서가 됩니다. 타입 정보만 봐도 함수의 입력과 출력을 알 수 있습니다.

셋째, 도구 지원이 탁월합니다. 자동완성, 리팩터링, 타입 추론이 생산성을 높여줍니다.

다음 챕터에서는 같은 코드를 JavaScript와 TypeScript로 나란히 작성하며 차이를 직접 확인합니다.