Ch 04. 이 책의 구성
선수지식
이 책은 JavaScript 기초를 알고 있다고 가정합니다. 다음 내용은 별도 설명 없이 사용합니다.
반드시 알아야 하는 것.
- 변수 선언:
let,const,var - 함수: 선언식, 표현식, 화살표 함수
- 배열과 객체 리터럴
- 구조 분해 할당:
const { a, b } = obj,const [x, y] = arr - 스프레드 연산자:
... - 템플릿 리터럴:
`Hello, ${name}` - 비동기:
Promise,async/await - 모듈:
import,export - 클래스:
class,extends,constructor - 배열 메서드:
map,filter,reduce,find
있으면 좋은 것.
- Node.js 기본 사용 경험
- npm 패키지 설치/관리 경험
- Git 기본 명령어
TypeScript를 처음 접하는 독자라면 자매 교재 "소설처럼 읽는 TypeScript"를 먼저 보는 것을 권합니다. 이 책은 그 책보다 빠르게 진행하고, 선수지식을 전제합니다.
PART별 로드맵
이 책은 10개의 PART로 구성됩니다.
PART 00. 들어가기 (지금 여기)
TypeScript를 선택하는 이유, 생태계 개요, 이 책의 활용법을 다룹니다.
PART 01. 개발 환경 준비하기
Node.js 22, VS Code, TypeScript 설치. tsconfig.json 상세 설정. VS Code 생산성 팁.
PART 02. 타입 시스템 핵심
원시 타입, 유니온, 인터섹션, 리터럴 타입, type alias, interface. 타입 시스템의 구조적 타이핑 개념.
PART 03. 타입 좁히기와 타입 가드
typeof, instanceof, in, is 키워드를 활용한 타입 좁히기. 판별 유니온 패턴.
PART 04. 제네릭
제네릭 함수와 인터페이스, 제약 조건, 조건부 타입, 내장 유틸리티 타입(Partial, Required, Pick, Omit 등).
PART 05. 모듈과 선언
ES 모듈 시스템, declaration 파일(.d.ts), 서드파티 타입 작성.
PART 06. 실전 타입 설계 패턴
브랜드 타입, 불변 타입, 빌더 패턴, 커맨드 패턴을 TypeScript로 구현.
PART 07. 프로젝트 1 — React + TypeScript 할 일 앱
React 19 + TypeScript + Vite로 Todo 앱 구축. Props, State, 이벤트 타이핑, 커스텀 훅.
PART 08. 프로젝트 2 — 타입 안전한 REST API 서버
Node.js + Express + TypeScript로 REST API 구축. Zod를 활용한 런타임 유효성 검사.
PART 09. JS → TS 마이그레이션
기존 JavaScript 프로젝트를 TypeScript로 전환하는 전략. allowJs, checkJs, 점진적 마이그레이션.
PART 10. 마무리
TypeScript 버전별 주요 기능, 다음 단계 학습 경로, 추천 자료.
이 책의 학습 방식
코드를 직접 실행하며 읽는 것을 권장합니다.
각 챕터의 코드 예제는 GitHub 저장소에 있습니다. 파트별 브랜치로 나뉘어 있어 특정 파트부터 시작해도 됩니다.
# 저장소 클론git clone https://github.com/ibetterkr/textbook-typescript-practical.gitcd textbook-typescript-practical# PART 01 시작 상태로git checkout part-01-start# PART 01 완성 상태로git checkout part-01-done책의 코드 표기 방식
새로 추가하거나 변경된 코드는 ...로 표시합니다.
// 수정: src/index.tsimport { createServer } from "http";const PORT = process.env.PORT ?? 3000;const server = createServer((req, res) => { res.writeHead(200); res.end("Hello TypeScript");});server.listen(PORT, () => { console.log(`Server running on port ${PORT}`);});코드 블록의 첫 줄 주석은 파일 경로를 나타냅니다. 수정:은 기존 파일 변경, 새 파일:은 신규 파일입니다.
TypeScript 버전
이 책은 TypeScript 5.8 기준으로 작성됩니다. 5.x 버전은 하위 호환성을 유지하므로 5.4 이상이면 대부분의 코드가 동작합니다.
# TypeScript 버전 확인tsc --version# 5.8로 업그레이드npm install typescript@latest다음 챕터에서는 실습 코드 저장소 사용법을 안내합니다.