[타입스크립트] enum과 트리쉐이킹

열거형(enum)

TypeScript의 enum(열거형)은 관련된 상수들을 하나의 그룹으로 정의하는 자료형이다.

(JS에는 enum이 없다.)

enum Status {
  SUCCESS = "success",
  FAIL = "fail",
  PENDING = "pending"
}

console.log(Status.SUCCESS); // "success"

---

🚨 enum과 트리 쉐이킹 문제

🌴 트리쉐이킹(tree-shaking)

사용하지 않는 코드를 제거하여 번들 크기를 줄이는 최적화 기법

Webpack, Vite, Rollup, esbuild와 같은 번들러가 이러한 기능을 제공

 

자바스크립트는 enum을 아래와 같이 즉시 실행 함수(IIFE)를 포함한 코드로 변환한다.
번들러는 IIFE를 '사용하지 않는 코드'라고 판단할 수 없어서 Tree-shaking이 되지 않는다.

"use strict";
var Status;
(function (Status) {
    Status["SUCCESS"] = "success";
    Status["FAIL"] = "fail";
    Status["PENDING"] = "pending";
})(Status || (Status = {}));

console.log(Status.SUCCESS); // "success"

---

✅ enum 대안

1️⃣ Union Type
as const는 타입을 리터럴 타입으로 고정시키는 데 사용된다.

const Status = {
  SUCCESS: "success",
  FAIL: "fail",
  PENDING: "pending"
} as const;

type Status = typeof Status[keyof typeof Status];

console.log(Status.SUCCESS); // "success"

 

👍 장점

• 트리쉐이킹이 가능하여 불필요한 코드가 번들에 포함되지 않음
• 타입 추론을 활용할 수 있음
• 객체 구조이므로 enum보다 가볍고 활용도가 높음

👎 단점

• enum처럼 직접적인 네임스페이스 접근 방식(Status.SUCCESS)을 사용할 수 없음 (객체 프로퍼티로 접근해야 함)
• 런타임에서 enum처럼 반복(iterate)할 수 없음

 

2️⃣ const enum
const enum은 컴파일 타임에 해당 값으로 직접 치환되며, JavaScript 코드에는 enum 객체가 생성되지 않는다.

const enum Status {
  SUCCESS = "success",
  FAIL = "fail",
  PENDING = "pending"
}

console.log(Status.SUCCESS); // "success"

 

👍 장점

• 트리쉐이킹이 가능하여 불필요한 코드가 번들에 포함되지 않음
• enum 문법을 그대로 유지할 수 있음
• 네임스페이스 접근 방식(Status.SUCCESS)을 사용할 수 있음

👎 단점

• isolatedModules 옵션을 사용할 경우 const enum을 사용할 수 없음 (Babel 및 일부 빌드 도구와 호환되지 않을 수 있음)
• 코드가 치환되므로 디버깅 시 원본 enum 값을 확인하기 어려움

---

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