타입스크립트에서 enum을 사용하면 안될까?

https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking

enum에 한글 형식을 어떻게 사용하면 좋을지 고민 중에 위와 같은 글을 보았습니다.

결론은 "사용하지 않는 코드를 삭제하는 기능인 tree-shaking을 위해 enum은 사용하면 안된다." 입니다.(자세한 이유는 블로그를 참조합니다.)

작성자는 union type > const enum > enum 순서로 사용할 것을 추천했습니다.
간결하고 이해하기 쉽도록 설명되어 있어 도움이 되었습니다.

chatGPT는 아래와 같이 설명했습니다.

Q. enum을 사용하면 tree-shaking이 안된다고 하는데, 어떻게 생각해?

A. 일반적으로 Enum은 컴파일 후 JavaScript 코드에서 실제 객체로 표현됩니다. 이는 Enum 값이 런타임에서도 존재해야 하기 때문입니다. 따라서, Enum을 사용하면 애플리케이션의 번들 사이즈가 커질 가능성이 있습니다.

그러나 최신 버전의 TypeScript에서는 const Enum이라는 개념을 도입하여 이 문제를 해결할 수 있습니다. const Enum은 컴파일 후 실제 객체가 아니라 상수 값으로 인라인화되어 JavaScript 코드에 삽입됩니다. 이 방식으로 Enum 값을 사용하여도 번들 사이즈가 작아질 수 있습니다.

또한, TypeScript 3.4부터는 --build 플래그와 tsconfig.json 파일에서 composite 속성을 사용하여 성능을 향상시킬 수 있는 방법을 제공합니다. 이를 사용하면 개별 파일 대신 전체 프로젝트를 번들링할 수 있으며, 이를 통해 Tree Shaking 성능을 향상시킬 수 있습니다.

따라서, Enum을 사용하면 번들 사이즈가 커질 가능성이 있지만, 최신 버전의 TypeScript에서는 const Enum과 --build 플래그 및 composite 속성을 사용하여 이 문제를 해결할 수 있습니다.

예제로 간단히 비교해 보겠습니다.
Enum과 const Enum은 모두 TS에서 상수 값을 정의하는 데 사용됩니다. 그러나 Enum은 컴파일 후 JS 코드에서 객체로 표현되며, const Enum은 컴파일 후 상수 값으로 인라인화됩니다.

// Enum 예제
enum Color {
  Red,
  Green,
  Blue
}
console.log(Color.Red); // 0
console.log(Color[1]); // "Green"

위의 예제에서, Color Enum은 Red, Green, Blue에 해당하는 세 개의 상수 값을 정의합니다. 이 Enum은 컴파일 후 아래와 같은 JS 코드로 변환됩니다.

// 컴파일 후 JS코드로 변환 시
var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
console.log(Color.Red); // 0
console.log(Color[1]); // "Green"

컴파일된 JS 코드에서 Color 객체는 실제 객체이므로, 번들 사이즈가 커질 수 있습니다.

// const Enum 예제
const enum Fruit {
  Apple,
  Banana,
  Orange
}
console.log(Fruit.Apple); // 0
console.log(Fruit[1]); // 에러 발생!

위의 예제에서, Fruit const Enum은 Apple, Banana, Orange에 해당하는 세 개의 상수 값을 정의합니다. 컴파일 후 아래와 같은 JS 코드로 변환됩니다.

console.log(0 /* Apple */);
console.log(1 /* Banana */); // 에러 발생!

컴파일된 JS 코드에서 Fruit const Enum은 상수 값으로 인라인화되므로, 번들 사이즈가 더 작을 수 있습니다. 또한, Fruit const Enum은 인덱스화되지 않으므로 Fruit[1]과 같은 키값을 이용한 접근은 불가능하네요.

따라서, Enum과 const Enum은 상수 값을 정의하는 데 사용되지만, Enum은 컴파일 후 JS 코드에서 객체로 표현되며, const Enum은 컴파일 후 상수 값으로 인라인화 되는 차이가 있습니다!

union type이 아직 익숙하지 않아 테스트해보고 코드 리펙토링이 필요할지 고민해봐야겠습니다.