이넘 타입(Enum Type)

이넘 타입이란?

TypeScript가 자체적으로 구현하는 기능으로 특정 값들의 집합을 의미하는 자료형이다.

숫자형 enum

별도의 값으로 초기화 하지 않으면 숫자형 enum으로 취급된다. (0부터 시작)

enum Shoes {
  Nike,
  Adidas,
	Sth
}

const myShoes = Shoes.Nike;
console.log(myShoes); // 0
console.log(Shoes.Adidas); // 1
console.log(Shoes.Sth); // 2

문자열 enum

제한된 문자열의 집합으로 사용할 수 있다.

함수의 인수로 아무런 값이 들어오는 것이 아니라, enum의 목록 중 하나로만 받고 싶을 때 사용할 수 있다.

enum Shoes {
  Nike = '나이키',
  Adidas = '아디다스'
}

const myShoes = Shoes.Nike;
console.log(myShoes); // '나이키'

enum Answer {
  Yes = 'Y',
  No = 'N'
}

const askQuestion = (answer: Answer) => {
  if (answer === Answer.Yes) console.log('정답');
  if (answer === Answer.No) console.log('오답');
}

askQuestion(Answer.Yes);

JavaScript에서는 사용할 수 없기 때문에 아래와 같이 객체를 사용하는 코드를 쓴다.

const OS = {
	Window: 'window',
	Mac: 'mac',
}

enum 타입의 문제점?

enum은 편리한 기능이지만 TypeScript가 자체적으로 구현한 기능이기 때문에 발생하는 문제가 있다.

트리셰이킹(Tree-shaking)이 되지 않는다.

Tree-shaking이 무엇인가요?

Tree-shaking은 간단하게 말해 사용하지 않는 코드를 삭제하는 기능을 말한다.

Tree-shaking을 통해 export 했지만 아무데서도 import 하지 않은 모듈이나, 사용하지 않는 코드를 삭제해서 번들 크기를 줄여 성능을 향상시킬 수 있다.

아래와 같이 TypeScript 코드를 작성한 경우를 생각해보자.

enum OS {
  Window = 'window',
  Mac = 'mac',
}

위 코드를 트랜스파일 하면 아래와 같은 JavaScript 코드가 된다.

var OS;
(function (OS) {
    OS["Window"] = "window";
    OS["Mac"] = "mac";
})(OS || (OS = {}));

Rollup과 같은 번들러는 즉시실행함수를 ‘사용하지 않는 코드’라고 판단할 수 없어서 Tree-shaking이 되지 않는다. 결국 OS를 import하고 실제로 쓰지 않더라도 최종 번들에는 포함된다.

enum 말고 무엇을 쓰면 좋을까요?

enum 대신에 유니온 타입을 사용하자.

const OS = {
  Wundiw: 'window',
  Mac: 'mac'
} as const;
type OS = typeof OS[keyof typeof OS]; // 'window' | 'mac'

위 코드는 아래와 같은 JavaScript 코드로 트랜스파일 된다.

const OS = {
  Window: 'window',
  Mac: 'mac',
}

TypeScript에서는 유니온 타입의 이점을 그대로 누리면서 JavaScript로 트랜스파일 해도 즉시실행함수가 생성되지 않으므로 Tree-shaking을 할 수 있다.

• 참고

https://www.inflearn.com/course/타입스크립트-입문/dashboard

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