기본 패턴
ts
// string enum — 값이 명확하고 직렬화 안전
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT",
}
// const enum — 컴파일 시 인라인, 런타임 객체 없음
const enum Status {
Idle = "idle",
Loading = "loading",
Done = "done",
}
function move(dir: Direction) {
console.log(dir); // "UP" | "DOWN" | ...
}설명
enum은 관련 상수 집합에 이름과 타입을 동시에 부여한다
enum은 값 집합에 의미 있는 이름을 붙이는 TypeScript 고유 기능입니다. 숫자나 문자열 상수를 흩어 놓는 대신, 하나의 이름 아래 묶어 코드의 의도를 명확하게 합니다. 컴파일 후에는 JavaScript 객체로 남습니다.
ts
enum Direction {
Up = "UP",
Down = "DOWN",
}
function move(direction: Direction) {
console.log(direction);
}
move(Direction.Up); // ✅
move("UP"); // ❌ — string은 Direction이 아님인자로 "UP"을 그냥 넣으면 오류가 납니다. 이 타입 안전성이 literal union과 공통된 장점이지만, enum은 런타임 객체가 남는다는 점에서 다릅니다.
string enum과 numeric enum은 동작 방식이 다르다
초기값 없이 선언하면 숫자 enum이 됩니다. 숫자 enum은 역방향 매핑을 자동 생성합니다.
ts
enum Direction {
Up, // 0
Down, // 1
}
console.log(Direction.Up); // 0
console.log(Direction[0]); // "Up" — 역방향 매핑
console.log(Direction[999]); // undefined — 막히지 않음역방향 매핑 때문에 의도하지 않은 숫자 접근이 가능합니다. string enum은 역방향 매핑을 생성하지 않고, 직렬화 시 사람이 읽을 수 있는 값이 남아 실무에서 더 안전합니다.
const enum은 컴파일 시 인라인되어 런타임 객체가 남지 않는다
const enum은 컴파일 시 참조 위치에 값이 직접 삽입됩니다. 별도 JavaScript 객체가 생성되지 않아 번들 크기를 줄일 수 있습니다.
ts
const enum Status {
Idle = "idle",
Done = "done",
}
const s = Status.Done;
// 컴파일 결과: const s = "done";단, const enum은 isolatedModules 옵션(esbuild, swc 기반 Vite 등 환경에서 필요)과 충돌합니다. 이 설정을 쓴다면 const enum을 피하고 일반 enum 또는 as const 객체를 써야 합니다.
빠른 정리
| 상황 | 적합한 선택 |
|---|---|
| 관련 상수에 이름을 붙이고 런타임 객체로 남김 | enum |
| 값이 사람이 읽는 문자열이어야 함 | string enum |
| 번들 크기 절감 (isolatedModules 없을 때) | const enum |
| 타입만 필요하고 런타임 객체 불필요 | literal union |
| esbuild / swc / Vite 환경 | const enum 피하기 |
| 외부 API 직렬화 포함 | string enum 또는 literal union |
주의할 점
const enum은 isolatedModules: true 환경에서 빌드 오류를 냅니다. Vite, esbuild, swc를 쓰는 프로젝트에서는 const enum 대신 일반 enum이나 as const 객체를 쓰세요.
ts
// ❌ isolatedModules 환경에서 const enum 사용 → 빌드 오류
const enum Status { Idle = "idle" }
// ✅ 대안 1: 일반 enum
enum Status { Idle = "idle" }
// ✅ 대안 2: as const 객체 (런타임 객체 + 타입 추출)
const Status = { Idle: "idle", Done: "done" } as const;
type Status = typeof Status[keyof typeof Status];참고 링크
1 sources