Template literal type은 다른 타입을 템플릿에 보간하여 새로운 문자열 리터럴 타입을 만들게 해줍니다 — 타입 레벨의 문자열 조작입니다.
ts
type Greeting = `Hello, ${string}`;
const a: Greeting = "Hello, world"; // ✅
const : = ;
Template literal type은 다른 타입을 템플릿에 보간하여 새로운 문자열 리터럴 타입을 만들게 해줍니다 — 타입 레벨의 문자열 조작입니다.
type Greeting = `Hello, ${string}`;
const a: Greeting = "Hello, world"; // ✅
const : = ;
type Color = "red" | "blue";
type Shade = "light" | "dark";
type Variant = `${Shade}-${Color}`;
// "light-red" | "light-blue" | "dark-red" | "dark-blue" — 모든 조합
컴파일러는 union의 모든 조합을 전개합니다 — 유효한 문자열 키(CSS 클래스, 이벤트 이름, 라우트 패턴)를 자동으로 생성하는 데 유용합니다.
type Entity = "user" | "post";
type Event = `${Entity}:${"created" | "deleted"}`;
// "user:created" | "user:deleted" | "post:created" | "post:deleted"
function on(event: Event, cb: () => void) {}
on("user:created", () => {}); // ✅
on("user:updated", () => {}); // ❌ 유효한 이벤트가 아님
type Getters<T> = {
[K in keyof T & string as `get${Capitalize<K>}`]: () => T[K];
};
// { name: string } → { getName: () => string }
Uppercase, Lowercase, Capitalize, Uncapitalize는 내장된 intrinsic 헬퍼입니다.
Template literal type은 문자열 기반 API를 타입 안전하게 만듭니다: 라우트 파라미터, 이벤트 시스템, CSS-in-JS, ORM 컬럼 이름 등입니다.
임의의 string을 받는 대신, 정밀하게 생성된 유효한 문자열 집합으로 제약할 수 있어 — 예전에는 문자열로만 다뤄지던 곳에서 오타를 컴파일 타임에 잡아냅니다.