[TypeScript] Enum 타입과 리터럴 타입

TypeScript

열거형 타입에는 아래와 같이 enum과 리터럴 타입을 사용할 수 있습니다. 장단점이 있으니 유의해서 사용하세요!

TypeScript에서의 Enum 타입

리버스 매핑이 가능하다.

enum LanguageNum {
 korean = 'ko'
 english = 'en'
 japanese = 'ja'
}

TypeScript에서의 리터럴 타입

enum의 타입보다 가독성이 조금 좋게 느껴진다.

interface LanguageNum {
 languageCode:  'ko' | 'en' | 'ja'
}

enum Type

enum을 사용하게되면 숫자 열거형, 문자 열거형, 혼합 열거형 등의 타입들을 정의해서 사용할 수 있댜. 또한 enum은 reverse mapping을 지원하기 때문에 키로 값을 얻을 수 있을 뿐만 아니라 키를 얻을 수 있는 방법이다. 그렇기 때문에 각 회원 등급별 할인률, 서비스중인 각 나라의 문자열 약자 등 여러가지들을 활용할 수 있을 것 같다.
사용방법은 아래와 같이 간단하게 사용 가능하다.

아래와 같이 회원 등급이나 각 나라의 코드를 지정하여 열거해서 타입을 가져올 수 있습니다. 또한 enum은 그 자신이 객체 입니다. 하지만 객체는 자신의 속성을 자유로이 변경할 수 있는 반면에 enum의 속성은 변경할 수 없다는 점 참고하세요!

--------------------------------------------------------------- 
enum UserGrade {
 VVIP,
 VIP,
 Premium,
}

enum LanguageNum {
 korean = 'ko'
 english = 'en'
 japanese = 'ja'
}

interface LanguageNum {
 languageCode:  'ko' | 'en' | 'ja'
}
 
 function getDiscountPer (grade: UserGrade): number {
  switch(grade) {
      case.VVIP:
      	return 50;
      case.VIP:
      	return 30;
      case.Premium:
      	return 10;
  }
 }

하지만 enum을 사용하면 Tree-shaking이 되지 않아 사용하지 않는 것을 추천한다는 말도 있습니다.
Tree-shaking이란 간단하게 말해 사용하지 않는 코드를 삭제하는 기능을 말합니다. 나무를 흔들면 죽은 잎사귀들이 떨어지는 모습에 착안해 Tree-shaking이라고 부릅니다. Tree-shaking을 통해 export했지만 아무 데서도 import하지 않은 모듈이나 사용하지 않는 코드를 삭제해서 번들 크기를 줄여 페이지가 표시되는 시간을 단축할 수 있습니다. enum을 사용하면 편리하지만 TypeScript가 자체적으로 구현한 기능이기 때문에 Tree-Shaking이 되지 않다는 점 알아주세요!