[TS] TypeScript의 열거형

TypeScript의 열거형(Enum)은 특정 값의 집합을 정의할 때 사용한다.

JavaScript에서는 기본적으로 열거형을 지원하지 않는다.

하지만 TypeScript에서는 문자혀으 열거형 & 숫자형 열거형을 지원한다.

 

enum Color {
	Red,
	Green,
	Blue
}

 

위 예시 코드에서는 Color라는 열거형을 정의하고 있다.

열거형의 값은 Red, Green, Blue 3개다.

 

숫자형 열거형

열거형은 숫자형, 문자형, 이 둘의 조합으로 정의할 수 있다.

default값으로 숫자형을 사용하며, 각 값은 자동으로 0부터 시작해 1씩 증가한다.

하지만 아래 코드와 같이 직접 값을 지정할 수 있다.

enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}

 

이 코드에서는 Red가 1, Green이 2, Blue가 4로 정의돼 있음을 알 수 있다.

 

열거형은 각 값에 대해서 연산 수행이 가능하다.

 

enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
}

let c: Color = Color.Green;
let greenValue: number = Color.Green;
let blueValue: number = Color.Blue;

console.log(c);          // 출력: 2
console.log(greenValue);  // 출력: 2
console.log(blueValue);   // 출력: 4

 

일반적으로 열거형은 상수(Constance)의 대용으로 사용한다.

TypeScript에서 열거형이 많이 사용되는 이유기도 하다.

 

열거형은 가독성을 높여주고 실수를 줄여주는 장점이 있다.

 

문자형 열거형

문자형 열거형은 열거형의 값을 전부 특정 문자 또는 다른 열거형 값으로 초기화해야한다.

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

let myDirection: Direction = Direction.Up;
console.log(myDirection); // 출력: "UP"

위 예제 코드는 Direction이라는 문자열 기반의 열거형을 정의하고 있다.

Up, Down, Left, Right 각각에 문자열 값을 할당하고 myDirection 변수를 Direction.Up으로 초기화한다.

이 때 출력 값으로 "Up"이 나온다.

 

문자형 열거형에는 숫자형 열거형과는 달리 auto-incrementing이 존재하지 않는다.대신 디버깅을 할 때 숫자형 열거형의 값은 불명확할 때도 있지만 문자형 열거형은 항상 명확한 값이 나온다는 장점이 있다.

enum HttpMethod {
  Get = "GET",
  Post = "POST",
  Put = "PUT",
  Delete = "DELETE",
}

function makeRequest(url: string, method: HttpMethod) {
  // ...
}

makeRequest("/api/data", HttpMethod.Post);

 

이 예제 코드는 HTTP 요청 방식을 나타내는 HttpMethod 열거형을 정의하고 있다.makeRequest 함수는 URL과 HTTP 요청 방식을 인자로 받고 HTTP 요청 방식을 지정할 때는 HttpMethod.Post와 같이 열거형 값을 사용한다.

 

이렇게 열거형을 사용하면 오타 같은 실수를 방지할 수 있으며 코드의 가독성과 안정성을 높여준다.

 

역 매핑(Reverse mappings)

 

역 매핑은 숫자형 열거형에만 있는 특징이다.열거형의 key는 value를 얻을 수 있고 value로 key를 얻을 수 있다.

enum Enum {
    A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"