다음 단계 — 실전 TypeScript

이 책은 의도적으로 범위를 좁혔습니다.

TypeScript에는 이 책에서 다루지 않은 개념들이 있습니다. 처음부터 모든 것을 다루면 오히려 아무것도 남지 않으니까요. 대신 실제로 자주 쓰이고, 이해하기 위해 기초가 필요한 것들만 골라서 다뤘습니다.

이제 기초가 갖춰졌으니, 그다음 이야기를 할 수 있습니다.

이 책에서 다루지 않은 것들

이 책을 마쳤다고 TypeScript를 다 배운 것은 아닙니다. 실전에서 자주 등장하지만 이 책의 범위를 벗어난 주제들이 있습니다. 하나씩 살펴보겠습니다.

조건부 타입

타입도 조건문처럼 쓸 수 있습니다.

type IsString<T> = T extends string ? "yes" : "no";type A = IsString<string>;  // "yes"type B = IsString<number>;  // "no"

T extends string ? ... : ... 형태로 타입 레벨에서 분기를 만드는 것입니다. 유틸리티 타입들이 내부적으로 이 방식을 사용합니다.

infer 키워드

조건부 타입 안에서 타입을 "추출"하는 도구입니다.

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;type Fn = () => string;type Result = ReturnType<Fn>;  // string

함수의 반환 타입, 배열의 요소 타입 등 타입 안에 숨어 있는 타입을 꺼낼 때 사용합니다.

선언 파일 (.d.ts)

TypeScript로 작성하지 않은 JavaScript 라이브러리를 TypeScript 프로젝트에서 쓸 때, 그 라이브러리의 타입 정보를 별도 파일로 제공하는 것이 선언 파일입니다.

@types/node, @types/react 같은 패키지가 모두 선언 파일의 모음입니다. 직접 선언 파일을 작성해야 하는 상황도 실무에서는 생깁니다.

런타임 타입 검증 — Zod

TypeScript의 타입은 컴파일 타임에만 존재합니다. 런타임에는 사라집니다.

그래서 외부에서 들어오는 데이터(API 응답, 사용자 입력)는 런타임에 직접 검증해야 합니다. Zod는 스키마를 정의하고 런타임에 검증하면서 TypeScript 타입도 자동으로 만들어주는 라이브러리입니다.

import { z } from "zod";const UserSchema = z.object({  name: z.string(),  age: z.number().min(0),});type User = z.infer<typeof UserSchema>;  // { name: string; age: number }

JavaScript에서 TypeScript로 마이그레이션

기존 JavaScript 프로젝트를 TypeScript로 전환하는 작업입니다. 모든 파일을 한 번에 바꾸는 것이 아니라, 파일 단위로 점진적으로 전환하는 전략을 써야 합니다. allowJs, checkJs 설정과 함께 단계적으로 타입을 추가해나가는 방법을 다룹니다.

"실전 TypeScript" 교재 안내

위의 주제들은 다음 교재인 "실전 TypeScript"에서 다룹니다.

"실전 TypeScript"는 이 책의 연장선입니다. 이 책이 "TypeScript가 무엇이고 어떻게 쓰는가"를 다뤘다면, 실전 TypeScript는 "TypeScript로 실제 프로젝트를 어떻게 구축하는가"를 다룹니다.

구성은 다음과 같습니다.

PART 01. 고급 타입 시스템

조건부 타입, infer, 매핑 타입, 템플릿 리터럴 타입을 다룹니다. 이 책의 제네릭과 유틸리티 타입 지식이 출발점이 됩니다.

이 책의 연계.

• PART 06(제네릭)에서 배운 T extends ... 문법이 조건부 타입의 기반입니다.
• PART 06에서 소개한 유틸리티 타입들의 내부 구현을 직접 따라 만들어봅니다.

PART 02. 선언 파일과 타입 패키지

.d.ts 파일 작성법, @types 패키지 관리, 모듈 선언 확장을 다룹니다.

이 책의 연계.

• PART 07(모듈)에서 배운 export / import 구조가 선언 파일의 기본 문법과 동일합니다.

PART 03. 런타임 타입 검증

Zod를 중심으로 런타임에 타입을 검증하는 방법을 다룹니다. API 통신과 폼 검증에 적용합니다.

이 책의 연계.

• PART 03(타입으로 생각하기)에서 설계한 인터페이스를 Zod 스키마로 변환하는 패턴을 배웁니다.

PART 04. React + TypeScript

함수형 컴포넌트 타입, Props와 State 타입, 이벤트 핸들러, 커스텀 훅 타입을 다룹니다.

이 책의 연계.

• PART 04(함수 타입), PART 06(제네릭)이 React의 컴포넌트 타입과 훅 타입 설계에 직접 활용됩니다.

PART 05. Node.js + TypeScript + Express

백엔드 API 서버를 TypeScript로 구축합니다. 요청/응답 타입, 미들웨어 타입, 환경변수 타입 안전성을 다룹니다.

이 책의 연계.

• PART 08(미니 프로젝트)에서 만든 퀴즈 앱의 구조가 Express API 서버의 구조로 확장됩니다.

PART 06. JavaScript 프로젝트 마이그레이션

기존 JavaScript 프로젝트를 TypeScript로 단계적으로 전환하는 전략과 도구를 다룹니다.

이 책의 연계.

• PART 01(개발 환경)의 tsconfig.json 지식이 마이그레이션 설정의 핵심입니다.

이 책과 실전 TypeScript의 연계 지도

아래 표는 이 책에서 배운 내용이 실전 TypeScript의 어떤 주제로 확장되는지를 보여줍니다.

지금 당장 해볼 수 있는 것

책을 읽는 것만으로는 실력이 늘지 않습니다. 직접 만들어봐야 합니다.

지금 바로 해볼 수 있는 작은 프로젝트들입니다.

첫째, 이 책의 퀴즈 앱을 확장해보세요. 새로운 퀴즈 카테고리를 추가하거나, 점수를 localStorage에 저장하거나, 타이머 기능을 넣어보세요. 이미 타입이 잡혀 있으니 새 기능을 추가할 때 TypeScript가 든든한 안전망이 되어줄 겁니다.

둘째, 본인이 평소에 쓰던 JavaScript 코드를 TypeScript로 바꿔보세요. 어떤 부분에서 any를 쓰게 되는지, 어떤 타입을 정의하기 어려운지 직접 부딪혀보세요.

셋째, TypeScript Playground(typescriptlang.org/play)에서 실험해보세요. 코드를 설치 없이 브라우저에서 바로 실행하고, 컴파일된 JavaScript도 확인할 수 있습니다.