template literal types와 문자열 패턴

기본 패턴

type EventName<T extends string> = `${T}Changed`;

type UserEvents = EventName<"name" | "email">;
// "nameChanged" | "emailChanged"

template literal type은 문자열 literal type을 조합해 새로운 문자열 타입을 만드는 기능입니다. JavaScript 템플릿 문자열과 비슷한 문법이지만, 타입 위치에서 동작합니다.
이 기능의 진짜 가치는 문자열 패턴을 타입 수준에서 검증할 수 있다는 점입니다. 예를 들어 "nameChanged", "ageChanged"처럼 규칙 있는 이벤트 이름을 자동으로 만들 수 있습니다.
mapped type, keyof, indexed access와 함께 쓰면 객체 키에서 이벤트 이름을 만들고, 다시 그 이름에 맞는 콜백 타입까지 연결하는 패턴도 가능합니다.
작은 프로젝트에서는 다소 고급 기능처럼 보일 수 있지만, 이벤트 시스템, 캐시 키, 라우트 이름, CSS 변수 이름처럼 문자열 규칙이 많은 코드에서 꽤 실용적입니다.
다만 가능한 문자열 조합이 너무 많아지면 타입이 무거워지고 읽기 어려워질 수 있습니다. 규칙성이 명확한 소규모 패턴에 가장 잘 맞습니다.

표현	의미
`${T}Changed`	T 뒤에 `Changed`를 붙인 문자열 타입
union 조합	가능한 모든 문자열 조합 생성
잘 맞는 경우	이벤트 이름, 키 패턴, 라우트 이름, 캐시 키
시너지	`keyof`, mapped type, indexed access와 함께 강력
주의점	조합이 너무 커지면 가독성과 성능이 나빠질 수 있음

template literal type은 멋지지만 모든 문자열 규칙을 타입으로 표현하려고 하면 오히려 과해질 수 있습니다. 사람이 읽어야 하는 규칙인지, 타입으로 검증할 가치가 충분한지를 먼저 판단하세요.

1 sources