テンプレートリテラル型 を使うと、他の型をテンプレートに補間することで新しい文字列リテラル型を構築できます。これは 型 レベルでの文字列操作です。
ts
type Greeting = `Hello, ${string}`;
const a: Greeting = "Hello, world"; // ✅
const : = ;
テンプレートリテラル型 を使うと、他の型をテンプレートに補間することで新しい文字列リテラル型を構築できます。これは 型 レベルでの文字列操作です。
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" — all combinations
コンパイラはユニオンのすべての組み合わせを展開します。これは有効な文字列キー(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", () => {}); // ❌ not a valid event
type Getters<T> = {
[K in keyof T & string as `get${Capitalize<K>}`]: () => T[K];
};
// { name: string } → { getName: () => string }
Uppercase、Lowercase、Capitalize、Uncapitalize は組み込みの intrinsic ヘルパーです。
テンプレートリテラル型は、文字列ベースの API を型安全にします。ルートパラメータ、イベントシステム、CSS-in-JS、ORM のカラム名などです。
任意の string を受け入れる代わりに、有効な文字列の正確な生成済み集合に制限できます。これにより、かつて文字列頼みだった箇所のタイプミスをコンパイル時に検出できます。