TypeScript 4.2 Template Literal Types로 타입 안전성 높이기

배경

이번 달 초 TypeScript 4.2가 출시되면서 Template Literal Types가 추가되었다. 기존에는 문자열 리터럴 타입의 조합을 만들기 어려웠는데, 이제 타입 레벨에서 문자열 조합이 가능해졌다.

우리 프로젝트에서는 API 엔드포인트 경로와 이벤트 이름을 문자열로 관리하면서 오타로 인한 버그가 종종 발생했다. 이를 개선하기로 했다.

적용 사례

API 엔드포인트 타입

type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type Resource = 'users' | 'posts' | 'comments';
type Endpoint = `${HTTPMethod} /api/${Resource}`;

// 타입 체크가 동작한다
const validEndpoint: Endpoint = 'GET /api/users'; // OK
const invalidEndpoint: Endpoint = 'GET /api/items'; // Error

이벤트 네이밍

type EventTarget = 'button' | 'modal' | 'form';
type EventAction = 'click' | 'open' | 'close' | 'submit';
type EventName = `${EventTarget}:${EventAction}`;

function trackEvent(eventName: EventName) {
  analytics.track(eventName);
}

trackEvent('button:click'); // OK
trackEvent('button:hover'); // Error: Type '"button:hover"' is not assignable

실무 효과

배포 후 모니터링 결과, 이벤트 트래킹 관련 에러가 눈에 띄게 줄었다. 특히 새로 합류한 팀원이 자동완성으로 정확한 이벤트 이름을 사용할 수 있게 되어 온보딩 시간도 단축되었다.

다만 타입 조합이 많아지면 컴파일 속도가 느려지는 이슈가 있어, 과도하게 사용하지 않도록 주의가 필요하다.

마무리

Template Literal Types는 문자열 기반 API를 다룰 때 타입 안전성을 크게 향상시킨다. 기존에 유니온 타입으로 일일이 나열하던 것을 조합으로 표현할 수 있어 유지보수도 편해졌다. TypeScript 4.2 업그레이드를 고려해볼 만하다.