[TypeScript] enum 👉 literal 타입 갈아타기(+class-validator, template literal 타입 활용)

3줄 요약

• enum은 tree-shaking, memory-leak 문제가 있고, 여러 enum을 하나의 enum으로 합칠 수 없다
• class-validator에서 IsEnum을 쓰려면, 타입이 아닌 객체가 필요하다
• literal과 Readonly<Record<K, V>> 유틸 타입을 활용해 문제를 해결했다

👉 hashnode에서 보기

---

enum은 비싸고 불편하다!

다른 언어들과 마찬가지로 TypeScript도 열거형 타입으로 enum을 제공한다

함수 인자로 특정 string만 들어와야 하는 경우 등 유용하게 쓸 수 있다

Tree-shaking, 메모리 문제

그러나 Line 기술 블로그('TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.')에서 잘 설명하는 것처럼, 순진한 enum 타입은 tree-shaking이 안되고 메모리 낭비까지 이어질 수 있다.

예상과는 다른 Type Union

무엇보다 개인적으로 가장 불편하게 느껴지는 것은 다른 타입들과는 다르게, enum은 union으로 여러 enum을 하나로 합칠 수 없다는 점이다

아래 예시 코드는 실무에서 구현 중인 API 타입 일부를 조금 수정해서 가져온 것이고, 전형적인 enum을 가져왔다

enum PeriodA {
  DAILY = 'DAILY',
  MONTHLY = 'MONTHLY'
}

enum PeriodCommon {
  WEEKLY = 'WEEKLY',
  QUARTERLY = 'QUARTERLY',
  YEARLY = 'YEARLY'
}

Union Type을 쓰는 대부분은 아래처럼 A 타입 일수도 있고, B 타입일 수도 있을 때이다

type StringOrNumber = string | number;

const strOrNumberLogger = (what: StringOrNumber) => console.log(what);
strOrNumberLogger('asdf');
strOrNumberLogger(123123);

그러나 이 넘의 enum은 그렇지 않다

PeriodA와 PeriodCommon를 합친 Periods라는 enum을 만들고 싶지만 그 과정은 쉽지 않다

아래처럼 타입 Union을 하면 당장은 에러가 나진 않지만, 실질적으로는 사용할 수 없는 타입이 된다

type Periods = PeriodA | PeriodCommon;

const periodLogger = (period: Periods) => console.log(period);
periodLogger('DAILY'); // error

Intersection은 더더욱 안된다

둘 사이에 공통점이 없기 때문에 never 타입이 된다

type Periods = PeriodA & PeriodCommon; // -> never

const periodLogger = (period: Periods) => console.log(period);
periodLogger('DAILY'); // error

타입 assertion으로 에러를 안낼 수는 있는데..아무 의미 없는 타입 선언이 되어 버린다

---

class-validator의 IsEnum을 쓰려면 객체가 필요하다!

가장 속 편한건 단순히 literal'만' 쓰는 거다

토스 기술 블로그 Template Literal Types로 타입 안전하게 코딩하기에서 소개하는 것처럼,

TypeScript에는 문자열을 가지고 다양한 타입을 만들어 낼 수 있는 재미있는(?) 기능이 있다

다만 위에서 예시로 가져온 Periods는 단순히 함수 인자의 타입만 추론하는데 쓰는 것이 아니라,

아래와 같이 class-validator를 활용해 API 요청 유효성 검사에도 사용될 수 있어야했다

export class GetChartDto {
  @IsNotEmpty()
  @IsEnum(Periods)
  period: PeriodNames;
}

당연한 거지만, 아래와 같이 type을 함수 인자로 넣을 수는 없다

위 라인 블로그에서 가장 추천하는 방법은 객체를 가지고 Union 타입을 만드는 것이다

enum으로 union 만들 방법을 구글링('typescript enum union')하면 나에게 가장 먼저 뜨는 글인

정규현님의 enum type 대신 union type으로 변경하기에서도 그 방식을 개선하여 사용한 경험을 보여주고 있다

여기서 핵심은 아래와 같다

const READONLY_객체 = 객체 as const;
type enumLike = keyof READONLY_객체[keyof typeof READONLY_객체]

짧고 유용한 코드지만, 부족한 나에게는 이게 뭘 의미하는지 한번에 파악하기가 조금 어렵다고 느껴졌다

다만 Readonly 타입을 사용한다는 점에서 힌트를 얻을 수 있었다

(이게 꼭 필요한 건지는 아직 테스트를 안해봤다...)

(적어도 나에게는) 좀더 편한 방법!

결론은 아래와 같다

// periods.ts
type ReadonlyRecord<K extends string, V> = Readonly<Record<K, V>>;

export type PeriodANames = 'DAILY' | 'MONTHLY';
export const PeriodA: ReadonlyRecord<PeriodANames, PeriodANames> = {
  DAILY: 'DAILY',
  MONTHLY: 'MONTHLY',
};

type PeriodCommonNames = 'WEEKLY' | 'QUARTERLY' | 'YEARLY';
const PeriodCommon: ReadonlyRecord<PeriodCommonNames, PeriodCommonNames> = { /** */ }

export type PeriodNames = PeriodANames | PeriodCommonNames;
export const Periods = { ...PeriodA, ...PeriodCommon };

커스텀 유틸 타입 ReadonlyRecord

이 부분은 반드시 필요한 부분은 아니고, 개인적으로 객체를 Reaonly로 만드는 경우가 많아 따로 선언했다

실무 코드에서는 좀더 편한 코딩을 위해 끼를 부려서 아래와 같이 선언했다

객체 key, value가 모두 string인 경우에는 기본값 덕분에 제네릭을 생략할 수 있고,

string은 아니지만 key, value가 동일한 타입인 경우는 하나만 적어주면 된다

export type ReadonlyRecord<P extends string = string, Q = P> = Readonly<Record<P, Q>>;

export const PeriodA: ReadonlyRecord<PeriodANames> = { /** */ }

literal 타입; PeriodNames, _RestPeriodNames

단순한 문자열 literal 타입이다

Union이라는 의미에 맞게, 관심사에 따라 분리된 타입들을 하나로 묶는 것이 쉽다

keyof typeof 객체를 대신하기 위해 타입을 하나하나 더 써야한다는 것이 단점이기는 하지만,

아래 객체를 생성할 때 자동완성이 되기 때문에 크게 불편함을 느끼진 않을수 있다

오히려 하나의 타입에 너무 많은 속성이 있어서 타이핑 시간이 오래 걸릴 정도라면, 타입을 충분히 분리하지 못한 게 아닐지 검토해봐야 할 것 같다

또 토스 블로그에서 소개한 것처럼, template-literal 타입들을 조합한 새로운 타입들을 선언하기 매우 편리해진다

export type MarketNames = 'domestic' | 'overseas';
export type CategoryNames = 'index' | 'stock';

export type DetailChartTypeNames = `${MarketNames}-${CategoryNames}`;
export const DetailChartTypes: ReadonlyRecord<DetailChartTypeNames> = {
  'domestic-index': 'domestic-index',
  'domestic-stock': 'domestic-stock',
  'overseas-index': 'overseas-index',
  'overseas-stock': 'overseas-stock',
};

Readonly 객체를 class-validator IsEnum에 활용

// get-chart-dto.ts
export class GetChartDto {
  @IsNotEmpty()
  @IsEnum(Periods)
  period: PeriodNames;
}

literal을 활용하여 안전한(type-safe) Readonly 객체를 만들고, class-validator에서 활용한다

class-validator가 아니더라도, 기존 enum 사용하듯 Periods.DAILY와 같이 사용할 수도 있다

JS로 Transpile 되었을때, 단순 객체 리터럴이기 때문에 라인 블로그대로라면 tree-shaking도 가능하다