일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- node
- media query
- 그럼에도불구하고
- github
- 자바문제풀이
- Servlet
- react-router-dom
- 프론트엔드
- redux
- frontend
- @media
- 반응형 페이지
- JS
- 변수
- CSS
- 코딩테스트
- 코드업
- git
- coding
- node.js
- webpack
- react
- 자바
- java
- 그럼에도 불구하고
- cleancode
- TypeScript
- JavaScript
- max-width
- HTML
- Today
- Total
그럼에도 불구하고
[TypeScript] 이넘(Enum)의 특징 본문
오늘은 Enum의 특징에 대해 알아보겠습니다.
[ 숫자형 이넘 ]
타입스크립트에서 숫자형 이넘은 아래와 같이 선언합니다.
enum Direction {
Up = 1,
Down,
Left,
Right
}
위와 같이 숫자형 이넘을 선언할 때 초기 값을 주면 초기 값부터 차례로 1씩 증가합니다.
Up - 1
Down - 2
Left - 3
Right - 4
만약 아래와 같이 초기 값을 주지 않으면 0부터 차례로 1씩 증가합니다.
enum Direction {
Up, // 0
Down, // 1
Left, // 2
Right // 3
}
[ 숫자형 이넘 사용하기 ]
이렇게 선언한 이넘은 아래와 같이 사용할 수 있습니다.
enum Response {
No = 0,
Yes = 1,
}
function respond(recipient: string, message: Response): void {
// ...
}
respond("Zenghyun", Response.Yes);
[ 문자형 이넘 ]
문자형 이넘은 앞에서 살펴본 숫자형 이넘과 개념적으로는 거의 비슷합니다. 다만, 런타임에서의 미세한 차이가 있습니다.
일단 문자형 이넘은 이넘 값 전부 다 특정 문자 또는 다른 이넘 값으로 초기화해줘야 합니다.
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT",
}
또한, 문자형 이넘에는 숫자형 이넘과는 다르게 auto-incrementing이 없습니다. 대신 디버깅을 할 때 숫자형 이넘의 값은 가끔 불명확하게 나올 때가 있지만 문자형 이넘은 항상 명확한 값이 나와 읽기 편합니다.
[ 복합 이넘 (Heterogeneous Enums) ]
기술적으로 이넘에 문자와 숫자를 혼합하여 생성할 수도 있습니다.
enum BooleanLikeHeterogeneousEnum {
No = 0,
Yes = "YES",
}
하지만 이 방식을 권고하진 않습니다. 최대한 같은 타입으로 이루어진 이넘을 사용하는 것이 좋습니다.
[ 런타임 시점에서의 이넘 특징 ]
이넘은 런타임시에 실제 객체 형태로 존재합니다. 예를 들어 아래와 같은 이넘 코드가 있을 때
enum E {
X, Y, Z
}
function getX(obj: { X: number }) {
return console.log("obj.X : ", obj.X);
}
getX(E); // 이넘 E의 X는 숫자이기 때문에 정상 동작
[ 컴파일 시점에서의 이넘 특징 ]
이넘이 런타임 시점에서는 실제 객체지만 keyof를 사용할 때 주의해야 합니다. 일반적으로 keyof를 사용해야 되는 상황에서는 대신 keyof typeof를 사용하는 것이 좋습니다.
enum LogLevel {
ERROR, WARN, INFO, DEBUG
}
// 'ERROR' | 'WARN' | 'INFO' | 'DEBUG';
type LogLevelStrings = keyof typeof LogLevel;
function printImportant(key: LogLevelStrings, message: string) {
const num = LogLevel[key];
if (num <= LogLevel.WARN) {
console.log('Log level key is: ', key);
console.log('Log level value is: ', num);
console.log('Log level message is: ', message);
}
}
printImportant('ERROR', 'This is a message');
[ 리버스 매핑(Reverse Mapping) ]
리버스 매핑은 숫자형 이넘에만 존재하는 특징입니다. 에넘의 키(key)로 값(value)을 얻을 수 있고 값(value)으로 키(key)를 얻을 수도 있습니다.
enum Enum {
A
}
let a = Enum.A; // 키로 값을 획득 하기
let keyName = Enum[a]; // 값으로 키를 획득 하기
'TypeScript > TypeScript basics' 카테고리의 다른 글
[TypeScript] 리터럴 타입이란? (0) | 2023.05.19 |
---|---|
[TypeScript] 인터페이스의 선택적 프로퍼티 (0) | 2023.05.17 |
[TypeScript] TypeScript로 Google Maps API 사용하기 (0) | 2023.05.13 |
[TypeScript] extends와 implements의 차이 (0) | 2023.05.04 |
[TypeScript] interface란? (0) | 2023.05.04 |