Typescript 개념잡기(4)

이번 글에서는 이넘(Enum)에 대한 개념을 잡아보자!

타입스크립트 핸드북(타입스크립트 핸드북)을 보고 공부한 것을 정리한 글입니다.
기본적인 JS 지식은 가진 상태라고 가정합니다.

---

이넘

이넘은 특정 값들의 집합을 의미하는 자료형이다. 예를 들어 아래와 같은 목록이 이넘이 될 수 있다.

나이키
아디다스
뉴발란스

이넘은 타 언어에서는 익숙한 타입이다.

타입스크립트에서는 문자형 이넘과 숫자형 이넘을 지원한다.

숫자형 이넘

타입스크립트에서 숫자형 이넘은 아래와 같이 선언한다.

enum Direction {
	Up = 1,
  	Down,
  	Left,
  	Right
}

위의 코드와 같이 숫자형 이넘을 선언할 때 초기 값을 주면 초기 값부터 차례로 1씩 증가하게 된다.

Up - 1
Down - 2
Left - 3
Right -4

숫자형 이넘 사용하기

선언된 이넘은 아래와 같이 사용 가능하다.

enum Response {
  NO = 0,
  Yes = 1,
}

function respond(recipient: string, message: Response): void {
  //...
}

respond("Geun Oh", Response.Yes);

또한 숫자형 이넘에서 주의할 점은 선언 시 만일 이넘 값에 다른 이넘 타입의 값을 사용하면 선언하는 이넘의 첫 번째 값에 초기화를 해주어야 한다는 점이다.

문자형 이넘

문자형 이넘은 앞에서 살펴본 숫자형 이넘과 개념적으로는 비슷하다. 그러나 런타임에서의 미세한 차이가 존재한다.

일단 문자형 이넘은 이넘 값 전부 다 특정 문자 또는 다른 이넘 값으로 초기화 해주어야 한다.

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

또한 문자형 이넘은 숫자형 이넘과 다르게 auto-incrementing이 없다. 대신 디버깅을 할 때 숫자형 이넘의 값은 가끔 불명확하게 나올 때가 있으나 문자형 이넘은 그런 오류가 없다.

복합 이넘 (Heterogeneous Enums)

기술적으로 이넘에 문자와 숫자를 혼합하여 생성할 수는 있다.

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

이 방법은 절대 권고되는 방식이 아니다! 최대한 같은 타입으로 이루어진 이넘을 사용하자.

런타임 시점에서의 이넘 특징

이넘은 런타임시에 실제 객체 형태로 존재한다.
아래 코드를 살펴보자.

enum E {
  X, Y, Z
}

function getX(obj: { X: number }) {
  return obj.X;
}
getX(E); // 이넘 E의 X는 숫자이기 때문에 정상 동작

컴파일 시점에서의 이넘 특징

이넘이 런타임 시점에서는 실제 객체지만 keyof를 사용할 때 주의해야 한다. 일반적으로 keyof를 사용해야 되는 상황에서는 대신 keyof typeof를 사용한다.

enum LogLevel {
  ERROR, WARN, INFO, DEBUG
}

// "ERROR | "WARN" | "INFO" | "DEBUG";
type LogLovelStrings = keyof typeof LogLevel;

function printImportant(key: LogLevelStrings, message: string) {
  const num = LogLevel[key];
  if (num = LogLevel.WARN) {
    console.log("Log level key is: ", key);
    console.log("Log level value is: ", num);
    console.log("Log level message is: ", message);
  }
}

printImportant("ERROR", "This is a message");

리버스 매핑

리버스 매핑은 숫자형 이넘에만 존재하는 특징이다. 이넘의 key로 value를 얻을 수 있고 value로 key를 얻을 수도 있다.

아래 예시를 살펴보자.

enum Enum {
  A
}
let a = Enum.A; // 키로 값을 획득하기
let keyName = Enum[a]; // 값으로 키를 획득하기

위와 같은 리버스 매핑은 문자형 이넘에는 존재하지 않는다!

---

지금까지 자바스크립트에는 없는 이넘이라는 타입에 대해 알아보았다.