타입스크립트 - enum

 

열거형 타입 enum

 

전에도 한번 봤던 적 있는데

https://0119eunji.tistory.com/231

 

책에 나오길래 다시 정리

 

 

enum(열거형) 타입은

말 그대로 여러 상수를 나열하는 목적으로 쓰임

 

enum Status {
    New,
    InProgress,
    Completed,
    Cancelled
}

 

이런 enum이 있다면

var status = {
    "0" : 'New',
    "1" :'InProgress',
    "2" :'Completed',
    "3" :'Cancelled'
    New : 0,
    InProgress : 1,
    Completed : 2,
    Cancelled: 3
}

 

런타임시 이런 자바스크립트 코드가 됨

 

 

enum Status {
    New,
    InProgress,
    Completed,
    Cancelled
}

function updateStatus(status: Status) {
    switch (status) {
        case Status.New: //0
            console.log("Status is New");
            break;
        case Status.InProgress: //1
            console.log("Status is In Progress");
            break; 
        case Status.Completed: //2
            console.log("Status is Completed");
            break;
        case Status.Cancelled://3
            console.log("Status is Cancelled");
            break;
    }
}

updateStatus(Status.Completed); // "Status is Completed"

 

 

깔끔...

 

값이 0,1,2,3 이 싫다면 기본값 넣어주면 됨

하나 넣으면 다 넣긴 해야함

 

enum Status {
    New = "202",
    InProgress= "201",
    Completed= "203",
    Cancelled= "402"
}

 

 

하지만

enum의 문제는 자바스크립트로 변환되다보니 값을 넣을 수 있다는 거임

 

 

1.

enum Status {
    New = "202",
    InProgress= "201",
    Completed= "203",
    Cancelled= "402"
}

Status.news = 3 <= 에러 안 뜸


// Status 결과
{
  New: '202',
  InProgress: '201',
  Completed: '203',
  Cancelled: '402',
  news: 3
}

 

 

 

2. 이건 5.0에서 고쳐졌다고 함. 에러 뜸

enum Status {
    New,
    InProgress,
    Completed,
    Cancelled
}

Status[6]

 

 

 

3. 이건 고쳐져야 하는 사항.......

enum Status {
    New = "202",
    InProgress= "201",
    Completed= "203",
    Cancelled= "402"
}


function test (props: Status) {}
/** '"New"' 형식의 인수는 'Status' 형식의 매개 변수에 할당될 수 없습니다. */
test("New")
test(Status.New)

 

 

 

 

그럼 enum 어떻게 쓰면 좋을까

 

 

책에서는 브랜딩 타입이랑 같이 쓰고 as const 쓰면 좋다고 함

 

 

++

const 다는 순간 자바스크립트 객체는 안 만들어짐

const enum Status {
    New = "202",
    InProgress= "201",
    Completed= "203",
    Cancelled= "402"
}

 

그럼에도 Status.New 가 정상 작동하는 이유는

 

자바스크립트 객체만 만들어지지 않았을 뿐이지

컴파일 타임에 이미 "202"로 대체가 되어 있음

 

런타임시 enum이라는 객체에 접근해서 값을 가져오는 게 아니라

이미 값을 컴파일 시점에서 해당 값을 코드에 삽입해버리는 거임

 

=> 이걸 열거형 값을 상수 값과 그 키로 모두 인라인 처리 라고 표현함