TypeScript as const 사용법: union 타입을 자동 생성하는 기준

literal widening

let status =
  'active';

let은 변경 가능하므로 status는 string으로 추론됩니다.

const:

const status =
  'active';

더 좁은 literal 타입을 유지할 수 있습니다.

객체 property는 const 객체여도 변경 가능하므로 넓게 추론될 수 있습니다.

const config = {
  mode: 'light',
};

mode는 일반적으로 string으로 추론될 수 있습니다.

as const

const config = {
  mode: 'light',
} as const;

mode는 ‘light’ literal로 보존되고 property가 readonly가 됩니다.

상수 배열

const filters = [
  'all',
  'active',
  'completed',
] as const;

filters는 readonly tuple로 추론됩니다.

타입 추출:

type TaskFilter =
  typeof filters[number];

결과:

'all' | 'active' | 'completed'

값 목록과 타입 union을 따로 유지할 필요가 없습니다.

객체 값 union

const statusCode = {
  idle: 0,
  loading: 1,
  success: 2,
} as const;


type StatusCode =
  typeof statusCode[
    keyof typeof statusCode
  ];

결과는 0 | 1 | 2입니다.

readonly 주의

as const는 객체와 배열을 readonly로 좁게 만듭니다.

const filters = [
  'all',
  'active',
] as const;

다음 변경은 허용되지 않습니다.

filters.push(
  'completed',
);

실제로 변경해야 하는 배열이라면 as const가 목적에 맞지 않을 수 있습니다.

as const는 runtime freeze가 아닙니다

TypeScript의 readonly는 컴파일 단계의 제약입니다.

Object.freeze와 같은 runtime 불변 처리와 동일한 개념으로 설명하면 안 됩니다.

독립 예제

const roles = [
  'admin',
  'member',
  'guest',
] as const;


type Role =
  typeof roles[number];


function isRole(
  value: string,
): value is Role {
  return roles.some(
    (role) =>
      role === value,
  );
}

값 목록과 타입 목록이 하나의 source에 연결됩니다.

자주 하는 실수

모든 객체에 as const

수정 가능한 객체까지 readonly가 되므로 실제 목적을 확인합니다.

as const를 runtime validation으로 오해

외부 문자열이 union에 속하는지는 runtime에서 별도 확인해야 합니다.

학습 완료 체크리스트

• literal widening을 설명할 수 있습니다.
• as const로 literal을 보존할 수 있습니다.
• readonly tuple에서 union 타입을 추출할 수 있습니다.
• as const가 runtime freeze가 아님을 이해했습니다.
• 변경 가능한 데이터에는 무조건 as const를 쓰지 않을 수 있습니다.