Typescript | Enum과 Enum의 문제점

Enum이란?

Typescript의 열거형 데이터 타입이다.

enum은 아이템(멤버)와 아이템에 할당된 값으로 이루어져 있다. 각 멤버는 고유한 식별자(이름)를 가지며, 해당 멤버에 대응하는 값은 기본적으로 숫자이지만 수동으로 할당할 수도 있습니다.

예시

//숫자 열거형
enum Team {
  ceo,
  design,
  back,
  front,
}

const myPosition: Team = Team.front;
//enum 타입을 사용하면 각 멤버에 대한 유니온 타입이 생성된다.
// 타입 : Team.ceo | Team.design | Team.back | Team.front

console.log(myPosition); // 출력 : 3

// 문자열 열거형
enum TeamName {
  ceo = 'park',
  design = 'kang',
  back = 'jang',
  front = 'lee',
}

const myName: TeamName = TeamName.front;
console.log(myName); // 출력 : lee

숫자 열거형의 경우 대응 값을 통해 멤버를 구할 수도 있다.

console.log(Team[0]) // 출력 : ceo
console.logI(Team)
// 출력 : {0: 'ceo', 1: 'design', 2: 'back', 3: 'front', ceo: 0, design: 1, back: 2, front: 3}
console.log(TeanName)
// 출력 : {ceo: 'park', design: 'kang', back: 'jang', front: 'lee'}

​
​

Enum의 문제점

1. 💡Tree-shaking

• typescript

enum TeamName {
  ceo = 'park',
  design = 'kang',
  back = 'jang',
  front = 'lee',
}

위 코드를 컴파일하면 아래와 같은 자바스크립트 코드가 나타난다.

• javascript

var TeamName;
(function (TeamName) {
    TeamName["ceo"] = "park";
    TeamName["design"] = "kang";
    TeamName["back"] = "jang";
    TeamName["front"] = "lee";
})(TeamName || (TeamName = {}));

JavaScript에 존재하지 않는 것을 구현하기 위해 컴파일러는 💡IIFE(즉시 실행 함수)를 포함한 코드를 생성한다.
하지만 번들러는 IIFE를 불필요한 코드로 인식 할 수 없어서 Tree-shaking이 되지 않는다.

💡 Tree-shaking이란?
트리 쉐이킹(Tree Shaking)은 프로젝트에서 사용되지 않는 코드를 제거하여 번들 크기를 최소화하는 프로세스이다. 주로 모듈 번들러가 미사용 코드를 탐지하고 제거한다.
이는 프로덕션 빌드에서 불필요한 코드를 제거하여 성능을 최적화하는 데 도움이 됩니다.

💡 IIFE(즉시 실행 함수)란?
선언하자마자 즉시 실행되는 함수
이 예제에서는 익명의 함수 표현식을 사용하여 함수를 정의하고, 그 바로 다음에 ()를 통해 함수를 즉시 호출하고 있습니다. 이로써 함수는 정의되자마자 실행되며, 전역 스코프를 오염시키지 않고 독립적으로 동작할 수 있습니다.

2. 안정성

Numeric enum은 타입 안정성이 보장되지 않는다.

enum Team {
  ceo,
  design,
  back,
  front,
}
console.log(Team[5]) // error X

​
​

Enum 대체

1. Union Types

• typescript

const teamName = {
  ceo:'park',
  design:'kang',
  back:'jang',
  front:'lee'
} as const
type TeamName = typeof teamName[keyof typeof teamName]

• javascript

const teamName = {
    ceo: 'park',
    design: 'kang',
    back: 'jang',
    front: 'lee'
};

IIFE가 생성되지 않는걸 확인 할 수 있다.

Union Types은 불필요한 오버헤드 없이 enum과 비슷한 동작을 제공한다. 따라서 코드의 안정성을 유지하면서 Tree-shaking을 활용할 수 있습니다.

2. const enum

const enum은 런타임에 객체를 생성하지 않는다.

• typescript

const enum TeamName {
  ceo = 'park',
  design = 'kang',
  back = 'jang',
  front = 'lee',
}

const myName: TeamName = TeamName.front;

• javascript

const myName = "lee" /* TeamName.front */;

const enum의 값이 사용되는 곳에 직접 값을 대체하기 때문에 사용되지 않는 부분(예시에서 ceo, design, back)은 제거될 수 있다.

참조
https://yamoo9.gitbook.io/typescript/types/enum
https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking