Enum과 타입 별칭

아래 두 코드는 거의 같은 역할을 하는 코드입니다.

Enum을 사용한 경우 (권장)

enum UserType {
  Admin = 'admin',
  User = 'user',
  Guest = 'guest',
}

const role = UserType.Admin;
console.log(role === UserType.Guest);

타입 별칭과 Union을 사용한 경우

type UserType = 'admin' | 'user' | 'guest'

const role: UserType = 'admin';
console.log(role === 'guest');

코드 양으로만 보면 타입 별칭을 쓰는 게 훨씬 간단해 보이는데요. 두 코드는 어떤 차이가 있을까요?

JavaScript로 트랜스파일링 했을 때

우선 Enum 코드를 자바스크립트로 트랜스파일링해 보면 다음과 같습니다.

"use strict";
var UserType;
(function (UserType) {
    UserType["Admin"] = "admin";
    UserType["User"] = "user";
    UserType["Guest"] = "guest";
})(UserType || (UserType = {}));
const role = UserType.Admin;
console.log(role === UserType.Guest);

Enum은 별도의 자바스크립트 객체를 만들어서 그 객체를 사용합니다. UserType은 자바스크립트에서 아래와 같은 객체인 거죠.

{ Admin: 'admin', User: 'user', Guest: 'guest' }

예를 들어서 가능한 UserType 값들을 모두 활용해서 어떤 동작을 구현하고 싶다면 Enum을 써서 Object.keys()라는 함수를 사용해 볼 수 있겠죠.

console.log(Object.keys(UserType)); // ['Admin', 'User', 'Guest']
반면에 타입 별칭은 타입스크립트에서만 의미 있는 코드입니다. 그래서 Enum과 달리 자바스크립트로 트랜스파일 했을 때 추가로 객체 같은 걸 만들지 않고 단순히 값만 사용하는 코드가 만들어집니다.

"use strict";
const role = 'admin';
console.log(role === 'guest');

어떤 걸 써야 할까?

대부분의 경우 Enum 또는 타입 별칭을 모두 사용할 수 있습니다. 하지만 되도록 Enum의 목적에 맞는 경우라면 Enum 문법을 사용하시는 걸 권장드립니다.

Interface와 타입 별칭

아래 두 코드는 거의 같은 역할을 하는 코드입니다.

Interface를 사용한 경우 (권장)

interface Entity {
  id: string;
  createdAt: Date;
  updatedAt: Date;
}

interface User extends Entity {
  username: string;
  email: string;
}

타입 별칭을 사용한 경우

type Entity = {
  id: string;
  createdAt: Date;
  updatedAt: Date;
}

type User = Entity & {
  username: string;
  email: string;
}

Interface의 상속과 Intersection의 가장 큰 차이점은 Intersection은 두 가지 이상의 타입을 한 번에 합칠 수 있다는 건데요. 이것도 Interface로 아주 불가능하지는 않습니다.

interface Entity {
  id: string;
}

interface TimestampEntity extends Entity {
  createdAt: Date;
  updatedAt: Date;
}

interface User extends TimestampEntity {
  username: string;
  email: string;
}
type Id = {
  id: string;
}

type Entity = {
  createdAt: Date;
  updatedAt: Date;
}

type User = Id & Entity & {
  username: string;
  email: string;
}

어떤 걸 써야 할까?

대부분의 경우 Interface와 타입 별칭을 둘 다 사용할 수 있을 겁니다. 하지만 되도록 Interface의 목적에 맞는 경우라면 Interface를 사용하는 걸 권장드립니다.

타입 별칭은 언제 쓰면 좋을까?

타입 별칭은 타입에 '이름'을 정하는 문법입니다. 복잡한 타입을 만들고, 그 타입을 여러 곳에서 활용할 때 사용하면 됩니다. 예를 들자면 아래처럼 복잡한 타입을 만들고 여러 곳에서 재활용할 수 있겠죠.

type Point = [number, number];
type SearchQuery = string | string[];
type Result = SuccessResult | FailedResult;
type Coupon = 
  | PromotionCoupon
  | EmployeeCoupon
  | WelcomCoupon
  | RewardCoupon
  ;