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 ⬅️ 타입스크립트 핸드북을 참고하면 좋을 것 같다.
✏️ 공부하며 정리한 내용입니다. 잘못된 정보나 더 공유할 내용이 있으면 댓글로 알려주세요!
읽어주셔서 감사합니다 😊
'Frontend Dev > TypeScript' 카테고리의 다른 글
타입스크립트 유니온/교차 타입과 리터럴 타입 (0) | 2023.07.29 |
---|---|
VSCode에서 TypeScript 환경 설정하기 (0) | 2023.07.26 |