이넘(Enums)

이넘은 특정 값들의 집합을 의미하는 자료형

 

숫자형과 문자형도 가능하고 문자와 숫자를 합친 복합형도 가능하지만 숫자형을 쓰는게 일반적이다.

 

예제)

 

// 숫자형


// 아무 값도 주지 않았을 때
enum Direction {
  Up, // 0
  Down, // 1
  Left, // 2
  Right // 3
}

// 기본 값 선언
enum Direction {
  Up = 1,
  Down,
  Left,
  Right
}

// 문자형

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

// 복합형

enum BooleanLikeHeterogeneousEnum {
    No = 0,
    Yes = "YES",
}

 

Enum 을 선언만 했을 때는 첫번째와 같이 0, 1, 2, 3이 암묵적으로 인덱스 값이 주어지만 명시적으로 디폴트 값을 줄 수 도 있다.

 

 

2) 

Enum 에 다른 타입의 값을 선언하면 첫번째 값에 초기화를 해줘야한다.

enum Wrong {
  A = getSomeValue(),
  B, // Error, 초기화가 필요합니다.
}

 

3) 이슈

Enum 을 알아보다 사용하지 않는 편이 좋다? 라는 포스팅을 봤습니다.

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

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

Tree-shaking이 되지 않는다 라는 이유입니다.

tree-shaking https://webpack.kr/guides/tree-shaking/

Tree Shaking | 웹팩

Tree-shaking 은 필요하지 않는 코드를 삭제하는 방식/기능입니다.

// 내 코드

export enum MOBILE_OS {
  IOS,
  ANDROID
}

// 문자열을 할당한 경우
export enum MOBILE_OS {
  IOS = 'iOS',
  ANDROID = 'Android'
}

// 자바스크립트로 트랜스파일 후

export var MOBILE_OS;
(function (MOBILE_OS) {
    MOBILE_OS[MOBILE_OS["IOS"] = 0] = "IOS";
    MOBILE_OS[MOBILE_OS["ANDROID"] = 1] = "ANDROID";
})(MOBILE_OS || (MOBILE_OS = {}));

Enum 으로 선언한 코드들이 자바스크립트 코드로 트랜스파일 하고 나서는 그대로 남아 있습니다.

그럼 어떻게 해야하나?

 

Union Types

const MOBILE_OS = {
  IOS: 'iOS',
  Android: 'Android'
} as const;

type MOBILE_OS = typeof MOBILE_OS[keyof typeof MOBILE_OS]; // 'iOS' | 'Android'

// 트랜스파일 후

const MOBILE_OS = {
    IOS: 'iOS',
    Android: 'Android'
};


// 다른 예제

enum LogLevel {
  ERROR, WARN, INFO, DEBUG
}

// 'ERROR' | 'WARN' | 'INFO' | 'DEBUG';
type LogLevelStrings = keyof typeof LogLevel;

keyof typeof 을 이용해서 enum을 사용 할 수 있습니다.