Builder.shin

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

문제 상황

프론트엔드에서 API 경로를 문자열로 관리하다가 /api/users/${id}/profile 대신 /api/user/${id}/profile로 오타를 냈다. 테스트에서도 놓쳤고, 프로덕션에서 404 에러로 발견됐다.

// 기존 방식
const getUserProfile = (id: string) => {
  return fetch(`/api/user/${id}/profile`); // 오타
};

Template Literal Types 도입

TypeScript 4.1에서 추가된 Template Literal Types를 활용해 타입 레벨에서 경로를 관리하도록 변경했다.

type APIVersion = 'v1' | 'v2';
type Resource = 'users' | 'posts' | 'comments';
type APIPath = `/api/${APIVersion}/${Resource}`;

const api = <T extends APIPath>(path: T) => {
  return fetch(path);
};

// 자동완성 지원 + 오타 방지
api('/api/v1/users'); // OK
api('/api/v1/user');  // 컴파일 에러

동적 경로 처리

동적 세그먼트가 있는 경우는 헬퍼 함수로 분리했다.

type UserPath = `/api/v1/users/${string}` | '/api/v1/users';

const userApi = {
  list: () => api('/api/v1/users' as const),
  detail: (id: string) => api(`/api/v1/users/${id}` as UserPath),
};

결과

  • 컴파일 타임에 경로 오타 감지 가능
  • IDE 자동완성으로 개발 속도 향상
  • API 문서화 효과 (타입이 곧 문서)

타입스크립트 4.3으로 업그레이드하면서 더 정교한 타입 추론이 가능해졌다. 다만 과도하게 사용하면 컴파일 시간이 늘어나니 핵심 부분에만 적용하는 게 좋다.

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