반응형
Enums
특정값들의 집합을 의미하는 자료형. 타입스크립트에서는 문자형 이넘과 숫자형 이넘을 지원함.
숫자형 이넘
타입스크립트에서 숫자형 이넘은 아래와같이 선언한다
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("Hello", Response.Yes);
숫자형 이넘에서 주의할 점
선언시 만약 이넘값에 다른 이넘 타입의 값을 사용하면, 선언하는 이넘의 첫번째 값에 초기화를 해줘야 한다는 점이다.
enum Wrong{
A = getSomeValue(),
B, //Error, 초기화가 필요합니다.
}
문자형 이넘
문자형 이넘은 앞에서 살펴본 숫자형 이넘과 개념적으로는 거의 유사하다. 다만 런타임에서 미세한 차이가 있다고 한다.
문자형 이넘은 이넘값 전부 다 특정 문자 또는 다른 이넘값으로 초기화를 해줘야한다.
또한 문자형 이넘에는 숫자형 이넘과는 다르게 auto-incrementing이 없다. 대신 디버깅할때 숫자형 이넘의 값은 가끔 불명확하게 나올 때가 있지만 문자형 이넘은 항상 명확한 값이 나와서 읽기 편하다.
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT",
}
복합 이넘 Heterogeneous Enums
기술적으로 이넘에 문자와 숫자를 혼합하여 생성 할 순 있다. 하지만 이 방식은 권고하지않는다고한다. 최대한 같은 타입으로 이루어진 이넘을 사용하는것이 좋다.
enum BooleanLikeHeterogeneousEnums {
No = 0,
Yes = "YES",
}
런타임 시점에서의 이넘특징
이넘은 런타임시 실제 객체 형태로 존재한다.
//이런 코드가 있을때,
enum E{
X, Y, Z
}
function getX(obj: { X: number}) {
return 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]; //값으로 키를 획득하기
'Javascirpt, Typescript' 카테고리의 다른 글
ts공부하기) 인터페이스2 - 읽기전용속성, 객체선언 타입체킹 (0) | 2023.10.25 |
---|---|
ts 공부하기) 인터페이스 (0) | 2023.10.24 |
추가공부) JavaScript & TypeScript의 this (0) | 2023.10.23 |
ts공부하기) typescript 함수 (0) | 2023.10.23 |
ts공부하기) 타입스크립트 기본 타입 (0) | 2023.10.20 |