타입스크립트의 열거형에 대해 알아봅시다~!
TypeScript 열거형
- 열거형(Enum)은 특정 값의 집합을 정의할 때 사용된다.
- TypeScript는 문자형 열거형 & 숫자형 열거형이 지원된다.
열거형 정의 방식
enum Color {
Red,
Green,
Blue,
}
숫자형 열거형(Enum)
- 디폴트 값으로 숫자형을 사용
- 각 값은 자동으로 0부터 시작하여 1씩 증가
- 수동으로도 값 지정 가능
- 열거형 값에 대해 산술 연산 수행도 가능
- 일반적으로 상수 값을 대신하여 사용
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
역 매핑 (Reverse mappings)
- 숫자형 열거형에만 존재하는 특징
- 열거형의 키(key)로 값(value)을 얻을 수 있음 또는, 값(value)으로 키(key)를 얻을 수도 있다.
enum Enum {
A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"
문자형 열거형(Enum)
- 열거형의 값을 전부 다 특정 문자 또는 다른 열거형 값으로 초기화해야 함
- 문자형 열거형은 항상 명확한 값이 나와 읽기 편하다.
- 주로 외부에서 가져온 값을 TypeScript에서 다루기 위해 사용됨
- HTTP 요청 방식을 나타내는 열거형을 정의할 수 있음
- HTTP 요청 방식을 나타내는 열거형을 정의할 수 있음
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT",
}
let myDirection: Direction = Direction.Up;
console.log(myDirection); // 출력: "UP"
HTTP 요청 방식을 나타내는 열거형 정의
enum HttpMethod {
Get = "GET",
Post = "POST",
Put = "PUT",
Delete = "DELETE",
}
function makeRequest(url: string, method: HttpMethod) {
// ...
}
makeRequest("/api/data", HttpMethod.Post);
실습 정리
JavaScript 코드를 TypeScript로 포팅하기
JavaScript 코드
const NumberColor = {
RED: 0,
GREEN: 1,
BLUE: 2,
};
const StringColor = {
RED: 'red',
GREEN: 'green',
BLUE: 'blue',
};
/* 화면에 나오는 부분 */
const appDiv: HTMLElement = document.getElementById('app');
appDiv.innerHTML = `
<section>
<h1>TypeScript 숫자형 Enum</h1>
<h3 class="red${NumberColor.RED}">${NumberColor.RED}</h3>
<h3 class="green${NumberColor.GREEN}">${NumberColor.GREEN}</h3>
<h3 class="blue${NumberColor.BLUE}">${NumberColor.BLUE}</h3>
</section>
<section>
<h1>TypeScript 문자형 Enum</h1>
<h3 class="${StringColor.RED}">${StringColor.RED}</h3>
<h3 class="${StringColor.GREEN}">${StringColor.GREEN}</h3>
<h3 class="${StringColor.BLUE}">${StringColor.BLUE}</h3>
</section>
`;
TypeScript 코드로 포팅
enum NumberColor {
RED = 0,
GREEN = 1,
BLUE = 2,
}
enum StringColor {
RED = 'red',
GREEN = 'green',
BLUE = 'blue',
}
/* 화면에 나오는 부분 */
const appDiv: HTMLElement = document.getElementById('app');
appDiv.innerHTML = `
<section>
<h1>TypeScript 숫자형 Enum</h1>
<h3 class="red${NumberColor.RED}">${NumberColor.RED}</h3>
<h3 class="green${NumberColor.GREEN}">${NumberColor.GREEN}</h3>
<h3 class="blue${NumberColor.BLUE}">${NumberColor.BLUE}</h3>
</section>
<section>
<h1>TypeScript 문자형 Enum</h1>
<h3 class="${StringColor.RED}">${StringColor.RED}</h3>
<h3 class="${StringColor.GREEN}">${StringColor.GREEN}</h3>
<h3 class="${StringColor.BLUE}">${StringColor.BLUE}</h3>
</section>
`;
'Front end > TypeScript' 카테고리의 다른 글
[ TypeScript ] 타입스크립트 타입 별칭 & 타입 추론 알아보기 (0) | 2023.06.02 |
---|---|
[ TypeScript ] 타입스크립트의 인터페이스란 ? (0) | 2023.06.01 |
[ TypeScript ] 타입스크립트의 연산자 활용 타입이란 ? (0) | 2023.05.31 |
[ TypeScript ] 타입스크립트의 함수란 ? (0) | 2023.05.31 |
[ TypeScript ] 타입스크립트의 타입이란 ? (1) | 2023.05.31 |