Typescript에서 Enum을 사용하지 않는게 좋은 이유

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

 

위 문서를 정리한 내용입니다.

 

한줄 정리 : Tree-shaking 측면에서 좋지않으니 Enum 대신 UnionType을 사용하도록 하자!

 

타입 스크립트 Enum

타입스크립트에서 enum은 아래와 같이 사용가능함

enum Color (
    RED="red",
    GREEN="greee",
    BLUE="blue"
)

console.log(Color.Red)
// "red"

위 코드는 자바스크립트로 트랜스파일 될 때 아래와 같은 형식으로 변경된다.

export var Color;
(function (Color){
   Color["RED"] = "red";
   Color["Blue"] = "blue";
   Color["Green"] = "green";
})(Color || (Color = {}));

enum은 타입스크립트가 자체적으로 구현했기 때문에 타입 스크립트에서 자바스크립트로 트랜스파일 될때 즉시실행함수(IIFE)를 포함한 코드 생성. 하지만 Rollup과 같은 번들러는 IIFE를 사용하지 않는 코드로 판단하지 않아서 Tree-shaking이 되지 않음.

즉 실제로 import만 하고 사용하지 않더라도 최종 번들에 포함된다.

 

 

대안: UnionTypes

대신 Union 타입을 사용하도록 하자!

const Color ={
    RED:"red",
    GREEN:"green",
    BLUE:"blue"
} as const

type Color = typeof Color[keyof typeof Color];

위 코드는 아래와 같이 트랜스 파일된다.

const Color = {
    RED : "red",
    BLUE:"blue",
    GREEN:"green"

}