Enum, Union Type, Tree Shaking

1. Tree Shaking

Tree Shaking이란, 나무를 흔들면 죽은 나뭇잎들이 떨어지는걸 보고 이름이 지어졌다.

더이상 사용하지 않는 코드들을 제거해주는 기능을 뜻한다.

여기서 Tree Shaking을 알려주는 이유는 Enum은 Tree Shaking이 되지않아 사용을 지양해야하기 때문이다.

 

2. Enum

Enum은 잘 알다시피 열거형 변수이다.

Typescript가 자체적으로 제공하는 기능으로 Javascript에서는 사용할 수 없다.

그래서 Typescript Compiler가 Enum 변수를 컴파일하게 되면, Typescript는  IIFE(즉시실행 함수)로 구현을하게 된다.

여기서 Rollup과 같은 번들러는 IIFE를 사용하지 않는 코드라고 판단할 수 없어서 Tree Shaking이 되지 않는다.

결국 Javascript에서는 Enum 변수를 사용하지 않더라도 import 하게 되는것이다.

export enum AssetRentalEnum{
    대여가능 = 1
    , 대여예약 = 2
    , 대여중 = 3
    , 대여불가 = -1
}

 

컴파일 후 Javasciprt 파일 (Enum 형식은 컴파일시 한글이 유니코드로 바뀐다.)

export var AssetRentalEnum;
(function (AssetRentalEnum) {
    AssetRentalEnum[AssetRentalEnum["\uB300\uC5EC\uAC00\uB2A5"] = 1] = "\uB300\uC5EC\uAC00\uB2A5";
    AssetRentalEnum[AssetRentalEnum["\uB300\uC5EC\uC608\uC57D"] = 2] = "\uB300\uC5EC\uC608\uC57D";
    AssetRentalEnum[AssetRentalEnum["\uB300\uC5EC\uC911"] = 3] = "\uB300\uC5EC\uC911";
    AssetRentalEnum[AssetRentalEnum["\uB300\uC5EC\uBD88\uAC00"] = -1] = "\uB300\uC5EC\uBD88\uAC00";
})(AssetRentalEnum || (AssetRentalEnum = {}));

3. Union Type

Union Type은 가정 권장하는 형식으로, 변수의 값이 여러 타입을 가지는 경우 주로 사용된다.

일반적으로 Javascript의 OR 연산자( || )와 비슷하게 사용된다.

export const AssetRentalEnum = {
    대여가능 : 1
    , 대여예약 : 2
    , 대여중 : 3
    , 대여불가 : -1
}

 

컴파일 후 Javasciprt 파일 (Union Type은 컴파일 후에도 한글이 유지된다.)

export const AssetRentalEnum = {
    대여가능: 1,
    대여예약: 2,
    대여중: 3,
    대여불가: -1
};