こんにちは。TypeScriptの深淵を覗き込み、日夜コンパイラの挙動と対話しているエンジニアです。
今日は、TypeScriptにおける「文字列操作」の魔法――Template Literal Types（テンプレートリテラル型）についてお話ししましょう。
「ただの文字列でしょ？」と侮ってはいけません。TypeScriptの型システムは、単なるバリデーターではなく、「コンパイル時に走る小さなプログラム」なのです。これを知れば、あなたのコードから「文字列のスペルミスによるランタイムエラー」が完全に消滅します。
さあ、一緒に型レベルの深淵を覗いていきましょう。
—
1. なぜ「ただの文字列」を型にする必要があるのか？
例えば、Web APIのURLパスを構築するとき、皆さんはどうしていますか？
// 普通の書き方
const path = “/api/users/123/profile”;
これだと、誰かが「`/api/user/123/profile`（sが抜けている）」と書いても、コンパイラは何も言ってくれません。実行して初めて「404 Not Found」で気づく……。これが現代のフロントエンド開発で最も避けたい「遅いバグ」です。
TypeScriptのTemplate Literal Typesを使えば、文字列の構造そのものを型として定義できます。
—
2. Template Literal Types の基本：文字列を「型」で組み立てる
使い方はシンプルです。バッククォート（` `）で囲むだけ。
type Method = “get” | “post”;
type Resource = “users” | “posts”;
// 型の組み合わせで、新しい型を作る
type ApiEndpoint = `/${Resource}/${Method}`;
// OK: 以下の値しか代入できない
const ok: ApiEndpoint = “/users/get”;
// エラー: スペルミスや未定義のパスはコンパイルエラーになる！
const ng: ApiEndpoint = “/user/get”;
// Type ‘”/user/get”‘ is not assignable to type ‘”/users/get” | “/users/post” | “/posts/get” | “/posts/post”‘.
ご覧の通り、`ApiEndpoint`型は、コンパイル時に自動的にすべての組み合わせを展開してくれます。これがTypeScriptの強みです。「あり得ない文字列」を記述した瞬間に、エディタが赤線を引いて教えてくれるのです。
—
3. 型レベルで文字列を操作する（高度なテクニック）
単に結合するだけでなく、TypeScriptは文字列の抽出や変換も型レベルで行えます。
例：CSSのプロパティを安全に定義する
CSSクラス名（`mt-1`, `mb-2`など）を型で管理する場合、以下のように定義できます。
type Direction = “t” | “b” | “l” | “r”;
type Spacing = 1 | 2 | 4 | 8;
// `${Direction}-${Spacing}` というルールを強制する
type MarginClass = `m${Direction}-${Spacing}`;
const myStyle: MarginClass = “mt-4”; // OK
const badStyle: MarginClass = “mx-4”; // エラー: m + x はDirectionに定義されていない
—
4. 陥りやすい罠と「型評価」の仕組み
ここで一つ、皆さんがハマりやすいポイントを伝授します。
「型」と「値」の境界線
よくあるエラーがこれです。
// ❌ 間違い：型定義の中でJavaScriptの関数は使えない
type Path = `/${string.toUpperCase()}`;
TypeScriptの型システムは、「型の中で実行される論理」と「実行時に評価されるロジック」を明確に分けています。 型の中で動的に文字列を加工したい場合は、`Uppercase
// ✅ 正解
type UserPath = Uppercase<`users/${string}`>;
// 結果: “USERS/…” という型になる
—
5. まとめ：TypeScriptを掌握するということ
Template Literal Typesを使いこなすことは、単なる「便利な記法」を覚えることではありません。
- 型安全性の境界を広げる: 実行時の文字列操作まで型チェックの範囲に組み込む。
- ドキュメントとしての型: 型定義を見ただけで、そのAPIの仕様が一目瞭然になる。
- 開発体験（DX）の向上: IDEの補完機能が劇的に賢くなる。
このテクニックを身につければ、あなたはもう「文字列の迷路」で迷うことはありません。コードを書くたびに、コンパイラという最高峰のレビュアーが隣であなたの肩を叩いてくれるようなものです。
ここをクリアしたあなたは、もうTypeScriptの初級者ではありません。次は `infer` キーワードを使った、さらに高度な「文字列の分解」の世界へ足を踏み入れてみてください。
あなたのコードが、より堅牢で、より美しいものになることを確信しています。また次のステップでお会いしましょう！