TypeScript enum과 union type, 언제 사용해야 할까?

타입스크립트에서 서로 연관된 값을 타입으로 지정할 때 enum 또는 union type을 주로 사용하는데, 

이 둘의 차이를 한번 정리해보고 적절하게 사용해보고자 본 포스팅을 작성한다.

 

 

String union

 

type Job = "teacher" | "nurse" | "doctor" | "police"

 

Enum

 

enum Job {
    teacher = "teacher", 
    nurse = "nurse",
    doctor = "doctor",
    police = "police"
}

 

 

Is there any problem of enum?

 

Yes.

그리고 enum의 제약 사항을 알면 union 및 enum을 시의적절하게 사용할 수 있을 것 같다.

 

1. 코드 사이즈 증가

 

enum은 JavaScript의 객체로 컴파일 되기 때문에 enum을 선언하면 전체 코드 사이즈에 영향을 줄 수 있다.

실제 번들링한 사이즈를 비교한 결과도

 

union type < const enum < const object < enum 순이기에 코드 사이즈에 여실히 영향을 줄 수 있을 것 같다.

 

2. 타입 안정성

 

enum 중 numeric type은 타입 안정성을 보장해주지 않는다. 아래와 같이 코드를 작성하면 에러를 던져주지 않는 것처럼 말이다.

 

enum State = {
    fail = 0,
    success = 1
}

const newState : State = 2; // 에러 발생하지 않음

 

3. 기본적으로 확장 불가 

 

enum은 기본적으로 확장이 불가하다. 그렇기 때문에 enum과 enum을 합치기 위해서는 결국 union type을 사용해주어야 한다.

 

enum Job {
    teacher = "teacher", 
    nurse = "nurse",
    doctor = "doctor",
    police = "police"
}

enum AnotherJob {
    developer = "developer", 
}

type Jobs = Job | AnotherJob;
const jobs : Job = Job.teacher;

 

그래서 결론은? 

 

1. 우선 union type으로 타입을 정의한다.

2. 런타임 접근이 필요하면 const obj를 사용한다.

3. 리버스 매핑 등 특별한 경우에는 enum을 사용한다.

 

 

* const obj

 

const Job =  {
    teacher : "teacher", 
    nurse : "nurse",
    doctor : "doctor",
    police : "police"
} as const

type JobType = typeof Job[keyof typeof Job];

 

* reverse mapping

 

enum Enum {
  A
}
let a = Enum.A; // 키로 값을 획득 하기
let keyName = Enum[a]; // 값으로 키를 획득 하기