`${T}` テンプレートリテラル型
最終更新：2026-10-22
`${T}` テンプレートリテラル型
テンプレートリテラル型は型レベルで文字列連結を行います。`${A}-${B}` は A、B のすべてのリテラルの組み合わせを列挙します。イベント名、ルート、CSS クラス名のような「接頭辞＋接尾辞」式の文字列の約束ごとに適しています。
| グループ | 型の組み合わせ |
|---|---|
| 種類 | 型 |
| strict モード | 不要 |
ℹ️ 説明 エディタは TypeScript を JavaScript にトランスパイルして実行します（型チェックなし）。型チェック結果は各サンプルの出力を参照してください。
📝 構文
type Lang = "zh" | "en";
type Page = "home" | "about";
type Route = `/${Lang}/${Page}`; // 4 通りの組み合わせの共用体⚙️ パラメータ
| `${T}` | プレースホルダにはリテラルユニオン型を置きます。ユニオンのメンバーはデカルト積に展開されます |
|---|---|
| Uppercase/Lowercase | 組み込みの文字変換ユーティリティ型で、テンプレートリテラルと同じ仕組みです |
戻り値：すべての文字列の組み合わせからなるユニオン型です。純粋にコンパイル時の産物であり、実行時には存在しません。
▶ サンプル
下のコードを編集して「試す」を押すと、トランスパイル実行結果を確認できます：
出力：
user:created | order:deleted
（トランスパイル後の実行出力。"user:updated" を配列に入れるとコンパイルエラーになります。4 通りの組み合わせの中に含まれていないからです）💡 ポイント
ℹ️ 説明 プレースホルダはリテラル型でなければなりません（string | number も可能ですが、ユニオンの展開はリテラルユニオンでのみ発生します）。組み合わせの数は各ユニオンのサイズの積です。
💡 ヒント 条件型の infer と組み合わせると、文字列型から断片を「抽出」できます。type OnEvent<T> = T extends `on${infer E}` ? E : never のようにです。
⚠️ 注意 ユニオンのメンバーが多くなると組み合わせの数は爆発し（10×10 なら 100 分岐）、コンパイルも遅くなります。ユニオンのサイズを制御するか、string に切り替えましょう。
🏷️ 関連型の組み合わせ
💡 関連ケース
ケースは今後追加予定です。
📚 関連チュートリアル
❓ よくある質問
Q テンプレートリテラル型は実行時に存在しますか？
A 存在しません。純粋にコンパイル時の型演算で、トランスパイル後に消えます。実行時には普通の文字列値しかありません。
Q 文字列型から一部分を抽出するには？
A 条件型＋ infer を使います。type Event<T> = T extends `on${infer Name}` ? Name : never のように、onCreated を created に絞り込めます。詳細は infer-keyword の項目を参照してください。
Q Uppercase<T> のような組み込み型もテンプレートリテラル型ですか？
A はい。Uppercase/Lowercase/Capitalize/Uncapitalize は同じ仕組みで文字を変換し、独自のテンプレートリテラル型と自由に組み合わせられます。
