타입스크립트의 enum, const enum

 

⭐️⭐️⭐️ enum

변수들을 하나의 그룹으로 묶고 싶을 때 사용 (주로 문자열 상수를 생성하는 데 사용됨) 위에서부터 순서대로 0, 1, 2, 3 … 이라는 값이 부여된다. 값을 사용할 수도 있고, 직접 타입으로도 쓸 수 있다.

const enum EDirection {
	Up,
	Down,
	Left,
	Right,
}

const a = EDirection.Up; // 0
const a = EDirection.Left; // 2
const a = EDirection[3]; // Right

const enum EDirection {
	Up = 3,
	Down,
	Left,
	Right,
}

const a = EDirection.Up; // 3
const a = EDirection.Left; // 5

enum vs object

// js의 객체로 사용하는 것과 거의 동일한데, 컴파일 후 코드를 안남아있게 하고 싶으면 enum 사용

const ODirection = {
	Up: 0,
	Down: 1,
	Left: 2,
	Right: 3,
} // <- 얘는 코드 남아있음
// 얘의 타입은 {Up: number; Down: number; Left: number; Right: number}

const ODirection = {
	Up: 0,
	Down: 1,
	Left: 2,
	Right: 3,
} as const // <- 얘는 코드 안남음 (엄격한 타입 지정)
// 얘의 타입은 {Readonly Up: 0; Readonly Down: 1; Readonly Left: 2; Readonly Right: 3}

// enum을 타입으로 사용 -> 바로 사용
function walk(dir: EDirection) {
	switch(dir) {
		case EDirection.Up:
		case EDirection.Down:
			return '세로방향'
		case EDirection.Left:
		case EDirection.Right:
			return '가로방향'
		default:
			return false
	}
}

// 객체를 타입으로 사용 -> 복잡해짐..
type Direction = typeof ODirection[keyof typeof ODirection];
function run(dir: Direction){
	//...
}

walk(EDirection.Left);
run(ODirection.Right);

enum의 장점

• 타입 안정성: 명시되지 않은 문자열은 인자로 받을 수 없어 타입 안정성이 우수함
• 명확한 의미 전달과 높은 응집력: 하나의 그룹으로 모여있기 때문에 해당 타입이 다루는 값이 무엇인지 명확하다.
• union 타입은 변경이 필요하면 사용되는 곳을 모두 찾아서 바꿔야 할 때가 있고, string 타입의 유니온 타입은 리팩토링 하기에 번거로운 점이 많고, 타입이라 순회가 안되지만 enum은 값이기 때문에 이터러블하다.
• ⇒ 넓은 범위에 확장해서 써야하면 enum을 사용

주의 사항

• 숫자로만 이루어져 있거나 타입스크립트가 자동으로 추론한 열거형은 안전하지 않은 결과를 낳을 수 있다.
• 숫자 상수로 관리되는 열거형은 선언한 값 이외의 값을 할당하거나 접근할 때 이를 방지하지 못한다.
• 반면 문자열 상수 방식으로 선언한 열거형은 미리 선언하지 않은 멤버로 접근을 방지한다.

상수 방식 선언

• 할당된 값을 넘어서는 범위로 역방향으로 접근하더라도 타입스크립트는 막지 않는다.
• ⇒ const enum 으로 열거형을 선언하면 역방향 접근을 허용하지 않아서 자바스크립트의 객체에 접근하는 것과 유사한 동작을 보장한다.
• 열거형은 타입스크립트 코드가 자바스크립트로 변환될 때 즉시 실행 함수 형식으로 반환되는데, 일부 번들러에서 트리쉐이킹 과정 중 즉시 실행 함수로 변환된 값을 사용하지 않는 코드로 인식하지 못하는 경우가 발생할 수 있어 불필요한 코드의 크기가 증가하는 결과를 초래할 수 있다.

 

• 이러한 문제를 해결하기 위해 const enum 또는 as const 를 사용하여 유니온 타입으로 열거형과 동일한 효과를 얻는 방법이 있다.
• ⇒ 어차피 상수를 쓰기 위해 사용하는 거라면 const enum을 추천

 

 

keyof, typeof

const obj = { a: '123', b: 'hello', c: 'world' };

// key로 타입 만들기
type Key = keyof typeof obj // type Key = {  'a' | 'b' | 'c' }

// value로 타입 만들기
type Key = typeof obj[keyof typeof obj] // type Key = {  'string' | 'string' | 'string' }

const obj = { a: '123', b: 'hello', c: 'world' } as const;
type Key = typeof obj[keyof typeof obj] // type Key = {  '123' | 'hello' | 'world' }

 

 

 

 

---

<참고>

[책] 우아한 타입 스크립트 

[강의] [리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편