Front-end/Typescript

Typescript enum 정리

아지송아지 2022. 2. 28. 21:57

 

Enumerated Type


타입스크립트에서 enum이란 특정 값들의 집합을 의미하는 자료형 (열거형)입니다.

C, C#, Java 등 많은 프로그래밍 언어들이 enum을 데이터 타입에 포함하고 있지만 자바스크립트는 포함하고 있지 않습니다.

타입스크립트로 넘어오게 되면서 enum을 사용할 수 있게 되었습니다.

 

 코드를 통해 어떤 것들이 있는지 살펴보겠습니다.

 

 

Numeric enums (숫자 열거형)


enum Alphabet{
    A,
    B,
    C,
    D,
    E,
    F
}

console.log(Alphabet);
/*
{
  '0': 'A',
  '1': 'B',
  '2': 'C',
  '3': 'D',
  '4': 'E',
  '5': 'F',
  A: 0,
  B: 1,
  C: 2,
  D: 3,
  E: 4,
  F: 5
}
*/

console.log(Alphabet.A); // 0
console.log(Alphabet.B); // 1

enum을 Alphabet처럼 정의를 하면 0부터 시작하여 1씩 증가하게 됩니다.

 

enum Alphabet{
    A = -2,	// -2
    B,		// -1
    C = 10,	// 10
    D,		// 11
    E = 0,	// 0
    F		// 1
}

만약 enum안에서 값을 정의했다면 해당 숫자부터 다시 1씩 증가합니다. 음수도 동일합니다.

 

 

계산된 멤버와 상수 멤버

만약 계산된 값을 정의하였다면 다음 멤버는 반드시 초기화해주어야 합니다.

enum Alphabet{
    A = "apple".length,
    B, // 오류 - A가 계산된 멤버이기 때문에 값을 정의해 주어야 합니다.
}

 상수 멤버로 초기화할 수 있습니다.

아래와 같은 값들이 있습니다.

  1. 리터럴 열거형 표현식
  2. 이전에 정의된 다른 상수 열거형 멤버에 대한 참조
  3. 괄호로 묶인 상수 열거형 표현식
  4. 상수 열거형 표현식에 단항 연산자 +, -, ~ 를 사용한 경우
  5. 상수 열거형 표현식을 이중 연산자 +, -, *, /, %, <<, >>, >>>, &, |, ^ 의 피연산자로 사용할 경우

* >>는 비트 연산자입니다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Right_shift

enum testEnum{ A, B }

enum Alphabet{
	// 상수 멤버
    A,
    B = testEnum.B
    C = 1 + 1,
    D = 1 << 1,
    E = B | C
}

 

 

 

String enums (문자열 열거형)


문자열 열거형은 숫자 열거형처럼 자동적으로 값이 증가하지 않습니다.

모든 멤버들의 값을 지정해주어야 합니다. 불확실성을 낮추고 확실하게 알 수 있다는 장점이 있습니다.

제한된 문자열의 집합이라고 생각하시면 됩니다.

 

enum Answer {
    Yes = "Y",
    No = "N"
}

function askQuestion(answer: Answer){
    if(answer === Answer.Yes){
        console.log("정답")
    }
    if(answer === Answer.No){
        console.log("오답")
    }
}
askQuestion(Answer.Yes);

askQuestion의 매게변수를 제한하여 오류날 확률을 낮춥니다.

ex) "Y", "Yes", "Ok"등 문자열을 직접 넣는게 아닌 Answer.Yes를 넣습니다.

 

 

 

참고 : 

https://radlohead.gitbook.io/typescript-deep-dive/type-system/enums#undefined

https://www.typescriptlang.org/ko/docs/handbook/enums.html#ambient-%EC%97%B4%EA%B1%B0%ED%98%95-ambient-enums

 

 

 

'Front-end > Typescript' 카테고리의 다른 글

Typescript typeof Array[number] 패턴 정리  (0) 2022.06.05
Typescript Generic  (0) 2022.03.22
Typescript 유니온, 인터섹션 타입  (0) 2022.02.28
Typescript type alias & interface  (0) 2022.02.24
Typescript에서 함수 선언하기  (0) 2022.02.22