const Type Parameter — TS 5.0의 작은 변화로 추론이 어떻게 좁혀지는가

TypeScript 5.0에서 추가된 const Type Parameter는 작은 키워드 하나로 추론을 크게 바꿉니다. 호출자가 as const를 매번 붙이지 않아도, 함수 입장에서 가장 좁은 리터럴 추론을 받게 만들 수 있습니다.

1. 문제 — 자동으로 넓어지는 추론

리터럴 배열을 함수에 넘기면 보통 string[]으로 넓어집니다.

1function pick<T extends string>(opts: T[]): T {
2  return opts[0];
3}
4
5const r = pick(['kr', 'en']);
6// r: string  ← 'kr' | 'en' 이 아닌 string

pick(['kr', 'en'] as const)로 as const를 붙이면 좁혀지지만, 사용자가 매번 기억해야 합니다.

2. const Type Parameter

함수 정의에서 타입 매개변수에 const를 붙이면, 호출 시점의 인자가 as const를 적용한 것처럼 추론됩니다.

1function pick<const T extends string>(opts: readonly T[]): T {
2  return opts[0];
3}
4
5const r = pick(['kr', 'en']);
6// r: 'kr' | 'en'

as const 없이도 정확히 좁혀집니다. 객체에서도 동일합니다.

1function defineConfig<const T>(cfg: T): T {
2  return cfg;
3}
4
5const cfg = defineConfig({ mode: 'dark', size: 'md' });
6// cfg.mode: 'dark', cfg.size: 'md'

as const 없이도 mode가 string이 아닌 'dark'로 좁혀집니다.

3. 컴포넌트 prop 추론에 활용

<Select options={[...]} value={...} /> 같은 패턴에서 value가 options 안의 값 중 하나여야 한다면 매우 유용합니다.

1type SelectProps<const T extends string> = {
2  options: readonly T[];
3  value: T;
4  onChange: (v: T) => void;
5};
6
7function Select<const T extends string>(props: SelectProps<T>) {
8  // ...
9}
10
11<Select
12  options={['light', 'dark', 'system']}
13  value="dark"        // OK
14  onChange={(v) => {} // v: 'light' | 'dark' | 'system'
15/>;
16
17<Select
18  options={['light', 'dark']}
19  value="auto"        // 에러 — 'auto'는 옵션에 없음
20/>;

호출 측에서 as const를 붙이지 않아도 컴파일러가 옵션과 값의 일치를 강제합니다.

4. 주의할 점

• const T는 값이 불변하다고 가정합니다. 가변 배열을 넘기면 추론이 의도와 다를 수 있습니다.
• 깊은 객체를 받을 때는 좁혀진 추론이 너무 무거울 수 있습니다. 필요한 부분만 const로 받습니다.
• 모든 위치에서 좋은 건 아닙니다. 일반 라이브러리 함수 시그니처에 무조건 붙이면 사용자에게 과도한 좁힘이 강요될 수 있습니다.

5. 정리

상황	추천
옵션이 한정된 select / chip	const T 적용
defineConfig / defineRoute 같은 헬퍼	const T 적용
일반 데이터 처리 함수	일반 T 유지

작은 키워드 하나로 호출자의 부담이 사라지고, prop 검증이 컴파일러로 옮겨갑니다. 라이브러리 헬퍼를 만들 때 가장 먼저 떠올릴 만한 도구입니다.

참고: TypeScript 5.0 릴리스 노트 — Const Type Parameters.