TypeScript에서의 enum

enum

: enumerated type의 줄임말로 열거형을 의미

 

- 열거형

: 요소, 멤버라 불리는 명명된 값의 집합을 이루는 자료형

: 열거자 이름들은 일반적으로 해당 언어의 상수  역할을 하는 식별자임

: 일부 열거자 자료형은 언어에 기본적으로 포함되어 있을 수 있음 (ex) boolean은 false와 true로 미리 정의된 열거형임

 

- enum의 장점 

: IDE의 지원을 받을 수 있다 (자동 완성, 오타 검증, 텍스트 리팩토링 등)

: 허용 가능한 값들을 제한할 수 있다

: 리팩토링 시 변경 범위가 최소화 된다 (내용을  추가해도 enum 코드만 수정하면 됨

: 확실한 부분과 불확실한 부분을 분리할 수 있음

: 문맥 (Context)을 담을 수 있다

 

- enum을 사용하는 이유

: 짧은 코드로 타입의 범위를 좁히고 가독성을 높이기 위함

: 같은 종류를 나타내는 여러 개의 숫자 혹은 문자열을 다루는데, 적당한 이름을 붙혀야 할때 사용

 

- enum 정의

enum 열거형_이름 {
  상수명1,
  상수명2,
  상수명3,
}

// 예시
enum CLOTH_SIZE {
  SMALL,
  MEDIUM,
  LARGE,
  X_LARGE,
};

: 여기서, 열거형 이름이나 상수들은 대부분 대문자 스네이크 케이스로 칭한다

 

- enum의 특징

: 타입스크립트에서 enum은 자체로 객체이다

 

- enum과 객체의 차이

: 객체의 경우 속성을 자유롭게 변경할 수 있지만, enum은 변경할 수 없다

: 객체의 속성은 리터럴 타입이 아니기 때문에 넓은 타입으로 타입추론이 가능하지만, enum은 항상 리터럴 타입이다

: 객체의 경우 자바스크립트가 허용하는 모든 값을 사용할 수 있지만 enum의 속성 값으로는 문자열 또는 숫자만 허용한다

 

※ 리터럴 타입

: 값이 변하지 않는 데이터

 

 

 

 

 

 

타입스크립트와 enum

- enum의 실제 값

enum CLOTH_SIZE {
  SMALL,
  MEDIUM,
  LARGE,
  X_LARGE,
};

 

: 위와 같은 데이터 일때 배열과 같이 CLOTH_SIZE.SMALL은 0이고, 나머지는 1,2,3의 값을 가진다

 

- enum에 특정 값 정의

enum CLOTH_SIZE {
  SMALL = '작은 사이즈',
  MEDIUM = '중간 사이즈',
  LARGE = '큰 사이즈',
  X_LARGE = '엄청 큰 사이즈',
};

 

: 위와 같이 하면 CLOTH_SIZE.SMALL에 접근 시 '작은 사이즈' 라는 값이 나오며, CLOTH_SIZE['작은 사이즈']로도 접근할 수 있다

 

- 상수 단언 (const assertion)

const languageCodes = {
  korean: 'ko',
  english: 'en',
  japanese: 'ja',
  chinese: 'zh',
  spanish: 'es',
} as const // const assertion
// 속성 값을 변경할 수 없음
// 속성의 타입으로 리터럴 타입이 지정됨
type LanguageCode = typeof languageCodes[keyof typeof languageCodes]
const code: LanguageCode = languageCodes.korean

: const 상수를 enum과 비슷한 방식으로 사용하는 방법

: 속성 값을 변경 할 수 없음

: 어떤 변수든 as const 키워드를 붙혀주면 해당 값에 정의된 초기 값만 사용 가능하며 변경할 수 없다

 

 

 

 

 

enum의 단점

- Tree-shaking을 지원하지 않는다

: enum은 타입스크립트에서는 지원하지만 자바스크립트에서 지원하지 않는 자료형이기 때문에 ts 코드를 js로 트랜스파일 하면 사용하지 않는 코드라해도 사라지지 않는다

 

※ Tree-shaking

: 자바스크립트를 인터프리팅 할 때 사용하지 않는 코드를 인식해서 삭제하는 기능

: 즉, 빌드할때 export 했지만 다른 곳에서 import하지 않는 함수나 변수, 모듈을 삭제해서 번들 크기를 줄임

 

- enum을 대체할 수 있는 방법

const MOBILE_OS = {
  IOS: 'iOS',
  Android: 'Android'
} as const;
type MOBILE_OS = typeof MOBILE_OS[keyof typeof MOBILE_OS]; // 'iOS' | 'Android'

 

: const assertion을 이용하면 enum의 장점을 누리면서도 tree-shaking까지 할 수 있음

 

 

 

 

 

Reference

Enum이란?

TypeScript enum을 사용하는 이유

상수(constant) 와 리터럴(literal)이란?

TypeScript 3.4: const assertion

TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.