[TypeScript] enum, const enum, as const

enum, const enum 비교

나는 상수를 선언할 때 습관적으로 enum을 사용했었는데, 타입스크립트에서 enum보다는 const enum을 사용하는 게 더 좋다는 글을 보았다.

 

enum ColorType {
    RED, BLUE, GREEN
}

console.log(ColorType.RED);   // 0

const enum ColorType {
    RED, BLUE, GREEN
}

console.log(ColorType.RED);   // 0

 

enum의 문제는

• 런타임에 객체를 만들기 때문에 오버헤드가 발생한다.
• 사용되지 않는 코드들도 번들에 포함되어 번들 용량이 증가한다. (즉, Tree Shaking이 안 된다.)

 

 

const enum을 사용하면 위의 문제들이 해결되지만, 제한이 있다.

• 리버스 매핑이 안 된다. 즉 ColorType[0] 으로 접근하지 못한다.
• Object.keys()(아래 코드 참고) 를 사용하지 못한다.

enum ColorType {
    RED, BLUE, YELLOW
}

console.log(Object.keys(ColorType));

 

 

이것들을 쓰지 않는다면(사실 잘 안씀) 대부분의 경우에선 const enum이 좋은 것 같다.

 

하지만 문제는 tsconfig.json에서 "isolatedModules": true 설정이 있다면 각 타입스크립트 파일이 독립적인 모듈로 변환되므로 export를 하는 방법으로는 const enum을 못 쓴다는 것이다.

import { ColorType } from "../test/Test";

console.log(ColorType.RED);    // 에러

참고로 Next.js는 저 속성이 거의 무조건 들어간다고 한다.

 

 

 

as const

as const라는 대안도 있긴 한데...

const COLOR = {
  red: 0,
  blue: 1,
  green: 2
} as const;

console.log(COLOR.red);    // 0
const myColor: typeof COLORS[keyof typeof COLORS] = Color.green;

보다시피 타입을 명시할 때 매우 길다는 단점이 있다. (가독성이 좋지 않음)

대신 const enum이 가지고 있는 장점을 누릴 수 있다.

 

 

---

내린 결론 : 한 파일 내에서 쓸거면 const enum 쓰고 그렇지 않으면 그냥 enum을 쓸 것 같다.

하지만 상수가 약 100개를 넘어가는 대규모 프로젝트라면 as const를 쓰는 게 더 유리하다고 하니, 알아두면 좋을 것 같다.