TypeScript 5의 const type parameter는 리터럴 타입을 자동으로 추론합니다. function foo<const T>(arg: T)로 선언하면 전달된 값이 자동으로 좁은 타입으로 추론됩니다.
TypeScript 5 고급 패턴 — 실무에서 바로 쓰는 타입
TypeScript의 고급 타입 패턴과 실무 활용법을 정리한다. Conditional Types, Template Literal Types, Mapped Types, infer 키워드, 타입 가드와 실전 유틸리티 타입 작성법을 포함한다.
한 줄 요약: TypeScript 고급 패턴의 핵심은 Conditional Types, Template Literal Types, satisfies 연산자, 그리고 타입 수준 프로그래밍이다.
TypeScript 기본 타입을 넘어, 실무에서 타입 안전성을 극대화하는 고급 패턴을 정리한다. 런타임 에러를 컴파일 시점에 잡고, API 응답 타입을 자동 추론하고, 복잡한 비즈니스 규칙을 타입으로 표현하는 방법이다.
Const Type Parameters
Conditional Types: T extends U ? X : Y 형태로 타입 수준의 조건 분기를 구현한다. API 응답 타입을 엔드포인트에 따라 자동으로 결정하거나, 옵션 플래그에 따라 반환 타입을 변경할 때 사용한다.
Conditional Type 실전 예시type ApiResponse<T extends 'user' | 'post'> = T extends 'user' ? { id: string; name: string; email: string } : T extends 'post' ? { id: string; title: string; body: string } : never; async function fetchApi<T extends 'user' | 'post'>( endpoint: T ): Promise<ApiResponse<T>> { return fetch(`/api/${endpoint}`).then(r => r.json()); } // 타입이 자동 추론됨 const user = await fetchApi('user'); // { id, name, email } const post = await fetchApi('post'); // { id, title, body }
Template Literal Types: 문자열 패턴을 타입 수준에서 검증한다. CSS 단위(\`${number}px\`), 이벤트 이름(\`on${Capitalize<string>}\`), API 경로(\`/api/${string}\`) 등을 타입으로 제한할 수 있다.
Template Literal Types 활용
Template literal types로 문자열 패턴을 타입으로 표현할 수 있습니다. API 라우트, CSS 클래스, 이벤트 이름 등을 타입 안전하게 관리할 수 있습니다.
Discriminated Unions 실전
판별 유니온은 상태 관리에서 가장 유용합니다. loading/success/error 상태를 타입으로 표현하면 각 상태에서 접근 가능한 속성이 자동으로 제한됩니다.
satisfies 연산자 활용
satisfies는 값의 타입을 검증하면서도 추론된 타입을 유지하는 연산자다. as const와 함께 사용하면 설정 객체의 타입 안전성과 자동완성을 동시에 얻을 수 있다.
satisfies + as const 패턴const routes = { home: { path: '/', auth: false }, dashboard: { path: '/dashboard', auth: true }, settings: { path: '/settings', auth: true }, } as const satisfies Record<string, { path: string; auth: boolean }>; // 'home' | 'dashboard' | 'settings' 로 자동완성됨 type RouteName = keyof typeof routes;
실전 유틸리티 타입
DeepPartial: 중첩 객체의 모든 필드를 선택적으로 만든다. 설정 업데이트 API에서 부분 업데이트를 받을 때 유용하다. Branded Types: 원시 타입에 브랜드를 붙여 의미적 구분을 강제한다. UserId와 PostId가 모두 string이지만 서로 호환되지 않도록 만든다.
주의: 타입 수준 프로그래밍은 강력하지만 과용하면 컴파일 속도가 느려지고 에러 메시지가 읽기 어려워진다. 복잡한 타입은 주석으로 의도를 설명하고, 타입 테스트(tsd 라이브러리)를 작성해 동작을 검증하라.
typescript타입패턴고급제네릭