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"
}
'Language > Javascript, typescript' 카테고리의 다른 글
[typescript] 날짜 String 타입으로 만들기 (0) | 2022.02.26 |
---|---|
[Javascript] 실행시간 측정 방법 (0) | 2022.02.23 |
[node] nvm 사용하기 (0) | 2021.11.06 |
[JS] Error: Failed to lookup view "home" in views director (0) | 2021.10.16 |
[Javascript] 이벤트 진행 막기 or 다시 시작 (0) | 2021.06.17 |