(SEB_FE) Section4 Unit5 TypeScript의 열거형(Enum)

TypeScript의 열거형(Enum)은 특정 값의 집합을 정의할 때 사용된다.
JavaScript에서는 기본적으로 열거형을 지원하지 않지만,
TypeScript에서는 문자형 열거형과 숫자형 열거형을 지원한다.

enum Color {
  Red,
  Green,
  Blue,
}

• Color라는 열거형을 정의하고 있다. 열거형 값은 Red, Green, Blue 세 개.

💚숫자형 열거형(Enum)

열거형은 숫자형과 문자열형, 혹은 이 둘의 조합으로 정의될 수 있다.
디폴트 값으로 숫자형을 사용하며, 각 값은 자동으로 0부터 시작하여 1씩 증가한다. BUT! 다음과 같이 수동으로 값을 지정할 수도 있음을 기억하자.

enum Color {
  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

열거형은 일반적으로 상수값을 대신하여 사용되므로, 타입스크립트에서는 열거형이 많이 사용된다. 열거형은 코드를 더욱 가독성 높게 만들어주고, 오타와 같은 실수를 방지해 준다.

💚문자형 열거형(Enum)

숫자형 열거형과 개념적으로는 거의 비슷하다.

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

// 초기화 필수! 
enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

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

• Direction이라는 문자열 기반의 열거형(Enum)을 정의하고 있다.
• Up, Down, Left, Right 각각에는 문자열 값이 할당되어 있다.
• myDirection 변수를 Direction.Up으로 초기화하고 있다. (출력 결과로는 "UP")

문자형 열거형에는 숫자형 열거형과는 다르게 auto-incrementing이 없다.
대신 디버깅을 할 때 숫자형 열거형의 값은 가끔 불명확하게 나올 때가 있지만 문자형 열거형은 항상 명확한 값이 나와 읽기 편하다.

문자열 기반의 열거형은 주로 외부에서 가져온 값을 TypeScript에서 다루기 위해서 사용된다.
아래 예시 코드는 HTTP 요청 방식을 나타내는 열거형.

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

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

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

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

💚역 매핑 (Reverse mappings)

역 매핑은 숫자형 열거형에만 존재하는 특징이다.
열거형의 키(key)로 값(value)을 얻을 수 있고 값(value)으로 키(key)를 얻을 수도 있다. 이는 숫자형 열거형에만 존재하며, 문자형 열거형에서는 존재하지 않는 특징.

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

💚실습

/* NumberColor와 StringColor를 enum으로 포팅. */

// const NumberColor = {
//   RED: 0,
//   GREEN: 1,
//   BLUE: 2,
// };

enum NumberColor {
  RED,
  GREEN,
  BLUE,
}

// const StringColor = {
//   RED: 'red',
//   GREEN: 'green',
//   BLUE: 'blue',
// };

enum StringColor {
  RED = 'red',
  GREEN = 'green',
  BLUE = 'blue',
}