enum과 Tree Shaking

타입스크립트의 enum은 열거형으로, 열거된 세트의 상수(constant)를 만들 때 사용한다. enum을 사용하면 동일한 namespace를 사용함으로써 상수끼리의 응집도를 높일 수 있다.
enum을 사용하는 방식에는 두 가지가 있는데, 어떻게 사용하는가에 따라 컴파일 결과가 조금 다르다.

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

console.log(Direction.Up);
var value = Direction.Down;

간단한 enum을 선언했다. 값을 지정하지 않으면 enum은 자동으로 0부터 값을 부여한다.
이 코드는 자바스크립트로 컴파일되면 아래와 같다.

var Direction;

(function (Direction) {
  Direction[Direction["Up"] = 0] = "Up";
  Direction[Direction["Down"] = 1] = "Down";
  Direction[Direction["Left"] = 2] = "Left";
  Direction[Direction["Right"] = 3] = "Right";
})(Direction || (Direction = {}));

console.log(Direction.Up); // 0
var value = Direction.Down; // 1

자바스크립트에는 enum이 없기 때문에, 자바스크립트는 이를 구현하기 위해서 Direction라는 변수와 즉시실행함수(IIFE)를 사용한다.
일반적으로 export했지만 아무데서도 import하지 않은 모듈이나, 불러와서 사용하지 않는 코드가 있으면 번들러에서는 Tree Shaking을 통해 삭제해서 번들 크기를 줄일 수 있다. 그런데 번들러 입장에서, IIFE는 언제 쓰일 지 모르는 코드이기 때문에 '사용하지 않는 코드'로 판단할 수 없어서 Tree Shaking을 하지 않는다.

반면에, const 키워드를 사용해서 const enum의 형태로 사용하면 조금 다르게 컴파일 된다. 아까와 동일한 enum을 const enum의 형태로 선언하면

const enum Direction {
  Up,
  Down,
  Left,
  Right,
}

console.log(Direction.Up);
var value = Direction.Down;

enum이 const로 선언되면 타입스크립트는 선언에 대한 코드는 생성하지 않는다. 자바스크립트로 컴파일 되었을 때 나오는 결과를 보면, enum 구현체는 사라지고 실행되는 부분만 남아있다.

console.log(0); 
var value = 1;

그렇기 때문에 사용하지 않는다면 Tree Shaking이 가능하고 최종 번들에 포함되지 않는다.

단 TSconfig --isolatedModule 옵션 사용중인 경우는 제외!

참고 :
TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.
(https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking/)