본문 바로가기

Frontend Dev/TypeScript

타입스크립트의 Enums(열거형) 타입에 대해 간단하고 빠르게 알아보자

반응형

 Enum은 C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 이름이 있는 상수들의 집합을 정의할 수 있다. TypeScript에서는 숫자와 문자열 기반 열거형을 제공한다. 열거형은 enum 키워드를 사용해 정의한다.

→ enum은 특정값만 입력되도록 하고 싶을때, 그 값들이 공통점이 있을때 사용한다.

 

enum Color {
  Red, 
  Orange,
  Blue,
}

 참고로 열거형은 기술적으로는 숫자와 문자를 섞어서 사용할 수 있지만 (이종 열거형: Heterogeneous enums) 굳이 그렇게 할 이유가 없다면 권장하지 않는다.

 

 

👾 숫자형 열거형(Enum)

 열거형의 디폴트 값으로 숫자형을 사용한다. 각 값은 자동으로 0부터 시작하여 1씩 증가하며, 수동으로 값을 지정할 수도 있다.

enum Color {
  Red = 1, // Red가 1로 초기화된 숫자 열거형 선언
  Green = 2,
  Blue = 4,
}

// 전부 초기화하지 않으면 0부터 시작하여 1씩 증가한다.
enum Color {
  Red,
  Green,
  Blue,
}

 

👩🏻‍💻 숫자형 Enum 기본 예제

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

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

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

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

 

✔️ 역 매핑 (Reverse mappings)

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

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

console.log(a) // 0
console.log(nameOfA) // "A"

 

 

👾 문자형 열거형(Enum)

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

👩🏻‍💻 문자열 Enum 기본 예제

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

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

 💬 문자형 열거형에는 숫자형 열거형과는 다르게 auto-incrementing이 없지만, 직렬화를 잘 한다는 이점이 있다. 디버깅을 할 때 숫자형 열거형의 값은 가끔 불명확하게 나올 때가 있지만 문자형 열거형은 항상 명확한 값이 나오기 때문이다.

 

👩🏻‍💻 문자열 Enum 활용 예제

 문자열 기반의 열거형은 주로 외부에서 가져온 값을 TypeScript에서 다루기 위해서 사용된다. 예를 들어, HTTP 요청 방식을 나타내는 열거형을 정의할 수 있다.

// HTTP 요청방식 열거형 정의
enum HttpMethod {
  Get = "GET",
  Post = "POST",
  Put = "PUT",
  Delete = "DELETE",
}

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

makeRequest("/api/data", HttpMethod.Post); 
// makeRequest의 인자로 HttpMethod.Post 열거형 사용

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

 


 간단하게만 생각했던 열거형(Enum)에도 다양한 이론이 많았다. 이번 글에서는 간단하게만 정리했는데, 열거형에 대한 자세한 설명은 공식문서 타입스크립트 Handbook - Enums ⬅️ 타입스크립트 핸드북을 참고하면 좋을 것 같다. 

 


✏️ 공부하며 정리한 내용입니다. 잘못된 정보나 더 공유할 내용이 있으면 댓글로 알려주세요!

읽어주셔서 감사합니다 😊

반응형