[LINE Engineering] TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다. 를 읽고

[LINE Engineering] TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.

TypeScript의 기본 타입 중 하나인 enum은 다른 언어를 공부했던 사람들이라면 알고 있을(?) 타입이다.

enum은 enumeration의 약자로 열거형을 의미하며, 배열처럼 키(인덱스)로 접근해서 값을 가져오거나, 맵처럼 키로 접근해서 값을 가져올 수 있는 특징을 가지고 있다.

 

타입스크립트에서의 사용법은 아래와 같다.

// 기본 시작 값은 0.
enum Fish { Rockfish, Shark, Boxfish }
let f: Fish = Fish.Rockfish;
console.log(f); // 0

// 시작 값 변경
enum Fish2 { Rockfish = 1, Shark, Boxfish }
let f2: Fish2 = Fish2.Shark;
console.log(f2); // 2

// 임의 값 설정
enum Fish3 { Rockfish = 10, Shark = 7, Boxfish = 8 }
let f3: Fish3 = Fish3.Boxfish;
console.log(f3); // 8

enum은 아티클에 소개된 내용처럼 집합을 만드는데 큰 도움이 되는 타입이고, C패밀리 계열의 언어를 쓰는 개발자들이라면 상당히 친숙할 녀석이다.

하지만 JavaScript에서는 enum이 존재하지 않으며, TypeScript가 자체적으로 구현한 기능이라 Tree-shaking이 되지 않는다는 단점을 가지고 있다고 한다.

Tree-shaking : 사용하지 않는 코드를 삭제하는 기능을 의미한다.

TypeScript의 번들러는 즉시 실행 함수로 이를 구현하는데 이 함수가 이후에 사용되지 않는 코드임에도 최종 번들에 포함되는 현상!

 

출처 : https://engineering.linecorp.com/wp-content/uploads/2020/07/9fba7580-ba18-11ea-9c22-9344d1208a74-1024x512.png

 

그래서 추천하는 방식이 Union Types이며, 아래와 같은 방식으로 사용한다!

const Fish = {
  RockFish: 0,
  Shark: 1,
  BoxFish: 2,
} as const;

type Fish = typeof Fish[keyof typeof Fish]

 

코드는 조금 더 길어졌지만 enum과 비교했을 때, 번들링 결과에서는 이를 감수할만한 확실한 차이가 발생한다.

// TypeScript

// enum
enum Fish { Rockfish, Shark, Boxfish }
let f: Fish = Fish.Rockfish;
// ---------------------------
// ---------------------------
// ---------------------------
// union
const FishUnion = {
  RockFish: 0,
  Shark: 1,
  BoxFish: 2,
} as const;
type FishUnion = typeof FishUnion[keyof typeof FishUnion];

// JavaScript 번들링 이후

// enum
var Fish;
(function (Fish) {
    Fish[Fish["Rockfish"] = 0] = "Rockfish";
    Fish[Fish["Shark"] = 1] = "Shark";
    Fish[Fish["Boxfish"] = 2] = "Boxfish";
})(Fish || (Fish = {}));
let f = Fish.Rockfish;
// ---------------------------
// ---------------------------
// ---------------------------
// union
const FishUnion = {
    RockFish: 0,
    Shark: 1,
    BoxFish: 2,
};

 

데모 코드

 

아티클을 읽고 Union으로 만드는 건 enum에 비해 조금 번거롭지만 번들링된 결과물을 봤을 때, 

충분히 시도할 가치가 있다는 결론을 내렸다.

 

언제나 그렇지만 아티클을 읽고 바로 적용할 수 있으면 적용기를 남기는게 좋을텐데...

이번에도 받아쓰기로 진행한 느낌?