9. 기타 타입 (2)

2021. 11. 10. 21:55재주껏 하는 Front-End/타입스크립트 (준비중)

반응형

이번 글에서는 열거형 타입에 대해 알아보자.

 

열거형 (Enums)

 

열거형 타입은 특정 값들의 집합으로 타입스크립트에서는 문자열과 숫자 타입을 제공한다. 열거형의 사용 방법은 아래와 같다.

 

// 1. 숫자형 열거형 타입
enum 열거형 이름 {
  숫자1,
  상수2 = 초기화 값,
  상수3 = 초기화 값 + 1,
  ...
}

// 2. 문자열 열거형 타입 (문자열의 경우 반드시 초기화 필요)
enum 열거형 이름 {
  문자열1 = '문자열 값',
  문자열2 = '문자열 값 2',
  ...
}

 

숫자 열거형 타입은 값을 초기화하지 않으면 0부터 아래 방향으로 +1 씩 값이 증가한다.

 

enum NumberEnums {
    A,
    B,
    C,
    D
}

console.log('Numbers > ', NumberEnums.A, NumberEnums.B, NumberEnums.C, NumberEnums.D)

 

위 코드의 실행 결과는 아래와 같다.

 

 

이번에는 아래와 같이 열거형 멤버에 초기값을 넣어보자.

 

enum NumberEnums {
    A = 100,
    B,
    C = 200,
    D
}

console.log('Numbers > ', NumberEnums.A, NumberEnums.B, NumberEnums.C, NumberEnums.D)

 

실행 결과는 아래와 같다. 이처럼 숫자 열거형 타입은 초기값이 있을 경우, 멤버의 바로 앞에 있는 값을 기준으로 +1씩 더하여 자동으로 값을 계산한다.

 

 

숫자 열거형 타입의 경우 값으로 키를 얻을 수도 있다. 위의 코드를 아래와 같이 변경해보자.

 

enum NumberEnums {
    A = 100,
    B,
    C = 200,
    D
}

console.log('Numbers > ', NumberEnums[100], NumberEnums[101], NumberEnums[200], NumberEnums[201])

 

실행 결과는 아래와 같다. 이렇게 값을 가지고 키를 찾을 수 있는 특성을 Reverse Mapping이라고 한다.

 

 

이번에는 문자열 열거형 타입에 대해 알아보자. 문자열 열거형은 숫자 열거형 타입과 달리 초기화를 필수로 해야만 한다. 문자열은 타입스크립트의 컴파일러가 어떤 값이 들어올지 예측할 수 없기 때문이다.

 

enum Sedan {
    K5 = 'K5',
    SM6 = 'SM6',
    Malibu = 'Malibu',
    SONATA = 'SONATA'
}

 

위의 코드에서 초기값을 하나 제거하면 아래와 같이 VS Code에서 에러를 발생시킨다.

 

 

열거형 타입은 숫자와 문자열을 혼합해서 사용할 수도 있다. 하지만 열거형 타입의 경우에는 상수를 편하게 사용하려는 경우에 자주 사용되므로 가능하면 같은 타입으로 통일해서 사용하는 것을 추천한다.

 

enum Sedan {
    A = 0,
    B = 2,
    K5 = 'K5',
    SM6 = 'SM6',
    Malibu = 'Malibu',
    SONATA = 'SONATA'
}

 


 

지금까지 열거형 타입에 대해 알아보았다. 다음 글에서는 ES6의 핵심이자 객체 지향 언어에서 가장 중요한 클래스에 대해 알아보도록 하겠다.

반응형

'재주껏 하는 Front-End > 타입스크립트 (준비중)' 카테고리의 다른 글

11. 클래스 (2)  (0) 2021.11.10
10. 클래스 (1)  (0) 2021.11.10
8. 기타 타입 (1)  (0) 2021.11.09
7. 인터페이스 (2)  (0) 2021.11.07
6. 인터페이스 (1)  (0) 2021.11.07