D-63

🔍 TypeScript 열거형 (Enum)

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

// TypeScript 열거형 형태
enum Color {
  Red,
  Green,
  Blue,
}
  
// 숫자형 열거형(Enum)
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"

열거형(Enum)은 상수값을 대신해 사용하므로 TypeScript에서는 열거형이 많이 사용된다.


문자열 열거형(Enum)은 HTTP 요청 방식을 나타내는 열거형을 정의할 수 있다.

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

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

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

이처럼 문자열 열거형으로 오타를 방지할 수 있고 가독성과 안정성을 높일 수 있다.

🔍 역 매핑

역 매핑은 숫자형 열거형에만 존재하는 특징으로 키로 값을 얻거나 값으로 키를 얻을 수 있다.

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

역 매핑은 문자형 열거형에는 존재하지 않는 특징이다.

🔍 열거형 예제

JavaScript

```javascript /* 밑의 코드를 enum으로 구현합니다. */

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

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

/ 화면에 나오는 부분 /

const appDiv: HTMLElement = document.getElementById('app');
appDiv.innerHTML = `

TypeScript 숫자형 Enum

${NumberColor.RED}

${NumberColor.GREEN}

${NumberColor.BLUE}

TypeScript 문자형 Enum

${StringColor.RED}

${StringColor.GREEN}

${StringColor.BLUE}

`; ```

TypeScript

```TypeScript /* 밑의 코드를 enum으로 구현합니다. */

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

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

/ 화면에 나오는 부분 /

const appDiv: HTMLElement = document.getElementById('app');
appDiv.innerHTML = `

TypeScript 숫자형 Enum

${NumberColor.RED}

${NumberColor.GREEN}

${NumberColor.BLUE}

TypeScript 문자형 Enum

${StringColor.RED}

${StringColor.GREEN}

${StringColor.BLUE}

`; ```