열거형

이인재·2022년 8월 11일
0

TypeScript

목록 보기
5/8

열거형

  • 의미있는 상수 자료 정의 가능
  • 키를 값에 할당하며 순서가 없는 집합이자 자료구조
  • enum키워드 + PascalCase 조합으로 생성
  • 계산된 값을 사용 가능

enum : 열거형 변수로 정수를 하나로 합칠 때 사용


숫자형 열거

enum을 사용하면 좌우를 할당하는 식으로 작성 가능

enum Zero {
	First = 100,
    Second,
    Third
}

이렇게 하면 자동적으로 Second에 101, Third에 102가 할당됨

enum Zero {
	First = 100,
    Second = 200,
    Third
}

이라고 하면 Third = 300이 할당될 것 같지만 1이 증가한 201이 할당됨


문자형 열거

  • 각 멤버의 값을 문자열로 초기화되어야 함
  • 값이 자동으로 증가하지 않음(모두 초기화 시켜줘야함)
enum Zero {
	First = 'First',
    Second = 'Second',
    Third = 'Third',
}

혼합형 열거

enum Zero {
	First = 100,
    Second = 'Second',
    Third = 'Third',
}

가능하지만 사용할 필요 없다.


리버스 매핑

  • 숫자형 열거의 경우 키와 값을 역으로 매핑 가능
  • 문자형 열거는 불가능

이렇게 역방향으로 찾는 것이 지원된다.

value 같은 경우에는

const val = Zero.First 

key 같은 경우에는

const key = Zero[val]

로 찾아주면 된다.


const 열거

  • 기본적으로 열거형은 불안전한 접근을 허용하지만
    const enum은 이를 보완한 안전한 열거형이다.
  • enum 앞에 const 키워드 명시
  • 컴파일 후 제거되기에 JS 코드를 생성하지 않음
const enum Zeros {
	First = 100,
    Second = 'Second',
    Third = 'Third',
}

console.log(Zeros.Third)

만약 이 코드를 enum으로만 선언하고 transpile 하면

var Zero;
(function (Zero) {
    Zero[Zero["First"] = 100] = "First";
    Zero["Second"] = "Second";
    Zero["Third"] = "Third";
})(Zero || (Zero = {}));
console.log(Zero.Third);

이제는 const enum으로 선언했다면

"use strict";
console.log("Third" /* Zeros.Third */);

이와 같이 enum 구현체는 다 사라지고 console 코드만 남아있다. 확실히 간결해진 것을 볼 수 있다.
이처럼 const enum은 불필요한 코드가 추가되는 것을 막을 수 있다.


열거형 활용

  • 열거형 : 런타임에 존재하는 실제 객체
  • keyof, keyof typeof와 조합하여 활용 가능

typeof

변수/함수의 type을 반환

const str = "HI"
const str2: typeof str = "BYE"
// const str2: string = "BYE"와 같다.

keyof tyeof

모든 프로퍼티의 key값을 union 형태로 변환

const enum Zero {
	id = 'Z',
    comment = 'Hi'
}

type Key = keyof typeof  Zero
// type Key = "id" | "comment" 와 같음


function good(h: Key) {
    console.log(h)
}

as const

일단 enumas const의 차이부터 파악하자
enum : 서로 연관된 상수들을 하나의 namespace로 묶어 추상화 목적
as const : type assertion의 한 종류, 리터럴 타입의 추론 범위를 줄이고 값의 재할당을 막기 위한 목적


이렇게 const를 사용하면 string, number라고 나오는 let보다 추론의 범위를 줄일 수 있다.

만약 객체 리터럴에서 as const를 사용하지 않은 경우에는 어떻게 될까?

const Zero = {
  base: "ko",						// string으로 추론
  one: "en",					// string으로 추론
};
language.base = "bat";	// bat로 base프로퍼티가 변경
language.one = "on"; // on로 one프로퍼티가 변경

하지만 as const를 사용한다면??

const Zero = {
  base: "ko",		// "ko"으로 추론, readonly 프로퍼티로 변경
  one: "en",		// "en"으로 추론, readonly 프로퍼티로 변경
} as const;
language.base = "bat";	// readonly이기에 Error
language.one = "on"; // readonly이기에 Error

readonly 프로퍼티로 변경되어 재할당이 불가능한 것을 할 수 있다.

0개의 댓글