TypeScript 5.x 시대에 요구되는 타입 디자인의 사상

TypeScript 5계에서는, 개발자 체험을 해치지 않고 형태 추론의 정밀도를 극한까지 높이는 신기능이 다수 도입되었습니다. 과도한 유형 어설션(as)에 의존하는 코드는 런타임 오류의 온상이 됩니다. 형 시스템을 아군에게 붙여, 자연과 형이 좁혀지는 실천 테크닉을 해설합니다.

1. const 형 파라미터 : 리터럴 형 추론의 스마트화

함수의 인수로 리터럴형을 보관 유지하고 싶은 경우, 종래는 호출측에서 as const 의 부여가 필요했습니다. TypeScript 5.0의 const 형 파라미터를 사용하면(자), 함수 정의측에서 리터럴 추론을 강제할 수 있습니다.

// 呼び出し側の as const なしで厳密なリテラル配列として推論
function createRoutes<const T extends readonly string[]>(routes: T): T {
  return routes;
}
const routes = createRoutes(['/home', '/dashboard']);

인수에 건네준 배열이나 객체가 widen 되지 않고, 엄밀한 튜플이나 리터럴로서 안전하게 추론됩니다.

2. satisfies 연산자 : 타입 적합성 검증과 추론의 양립

형 주석을 붙이면 프로퍼티의 구상형 정보가 손실되고, 제거하면 밸리데이션이 효과가 없는 딜레마는 satisfies 로 해소합니다.

type Palette = Record<string, string | number[]>;
const theme = {
  primary: '#0066cc',
  rgb: [0, 102, 204],
} satisfies Palette;

// 型制約を満たしつつ、個別プロパティの型が完全保持される
theme.primary.toUpperCase(); // string型メソッドが安全に呼出可能

3. 템플릿 리터럴 형식으로 이벤트 허브

type Event = 'click' | 'focus';
type HandlerMap = { [K in `on${Capitalize<Event>}`]?: () => void };

문자열 연결 규칙을 형식 수준에서 강제하고 이벤트 이름의 타이포를 빌드 시 100% 방지합니다.

안티패턴 : 현장에서 박멸해야 할 「일단 any」

형태 에러를 손쉽게 해소하기 위한 as any 는, TypeScript의 혜택을 스스로 포기하는 악수입니다. 타입 가드 함수(is 연산자)나 Zod 등의 스키마 밸리데이터를 활용하여 런타임 경계에서 안전하게 타입을 좁힐 수 있습니다.