こんにちは。TypeScriptの深淵へようこそ。
日々コードを書いていると、「文字列」という自由奔放な型に頭を悩ませることはありませんか？ APIのパス、CSSのクラス名、設定キー……。これらを単なる `string` 型で放置しておくのは、TypeScriptの恩恵を半分捨てているようなものです。
今日は、TypeScriptにおける「テンプレートリテラル型」を使って、文字列を単なる文字の羅列から「型安全な契約書」へと昇華させる極意を伝授します。ここをマスターすれば、あなたのコードから「タイポによる実行時エラー」という悪夢が消え去りますよ。
—
1. 文字列を「型」にするということ
まずは、基本の復習から。TypeScriptでは、具体的な値そのものを型にできます。これをリテラル型と呼びます。
type Status = “success” | “error” | “loading”;
// この変数には、指定した3つの文字列しか代入できません
let currentStatus: Status = “success”;
// currentStatus = “failed”; // ❌ コンパイルエラー！
これだけでも強力ですが、もし「`user/123/profile`」のような、動的なパスを型安全に扱いたい場合はどうでしょう？ そこで登場するのがテンプレートリテラル型です。
—
2. テンプレートリテラル型：文字列を合成する魔法
テンプレートリテラル型は、JavaScriptのテンプレートリテラル（バッククォート “ ` “）と同じ記法で型を定義できます。
基本の形
type UserPath = `user/${string}`;
const path1: UserPath = “user/123”; // ✅ OK
const path2: UserPath = “user/settings”; // ✅ OK
const path3: UserPath = “admin/123”; // ❌ コンパイルエラー！
この型は、「`user/` で始まり、その後にどんな文字列が続いても良い」というルールを型システムに組み込んでいます。これを使えば、ルーティングの定義でタイポを完全に防げますよね。
—
3. 型レベルで文字列を操作する（高度なテクニック）
さらに面白いのは、型同士を組み合わせたり、特定のフォーマットを強制したりできる点です。例えば、CSSの単位を扱う型を作ってみましょう。
type Unit = “px” | “rem” | “em” | “%”;
type Size = `${number}${Unit}`;
const width1: Size = “100px”; // ✅ OK
const width2: Size = “50%”; // ✅ OK
const width3: Size = “10rem”; // ✅ OK
const width4: Size = “10s”; // ❌ コンパイルエラー！ “s” はUnitに含まれないため
ここがポイント：
`Size` 型は、`number` と `Unit` という2つの型を「型レベルで連結」しています。これにより、値が生成される前に「その文字列が正しいフォーマットか」をコンパイラが検証してくれるのです。
—
4. 陥りやすい罠と解決策
初学者がテンプレートリテラル型で躓きやすいポイントが2つあります。
① `string` 型との結合
テンプレートリテラル型に `string` を使うと、結果は単なる `string` 型に広がり（Widening）、型安全性が失われることがあります。
type DynamicPath = `api/${string}`;
function getPath(id: string) {
// TypeScriptはこれが `DynamicPath` であることを確信できない場合があります
const path: DynamicPath = `api/${id}`;
return path;
}
もし関数の引数などから型を厳密に保ちたい場合は、ジェネリクスを組み合わせて型を固定（推論）させるのがプロの技です。
② 大規模なUnion型によるパフォーマンス低下
テンプレートリテラル型で何千もの組み合わせを生成すると、TypeScriptの型推論エンジンに負荷がかかります。「型が複雑すぎてエディタが重い」と感じたら、抽象化の粒度が細かすぎないか見直してみてください。
—
5. まとめ：型は「ドキュメント」以上の存在
テンプレートリテラル型を使いこなすと、コードはこう変わります。
1. ドキュメントが不要になる: 型定義を見るだけで、どんな文字列を渡すべきか一目瞭然。
2. 実行時確認のコストが減る: 「不正なパスが来たらどうしよう？」という不安を、コンパイル時に解消できます。
3. リファクタリングが恐くなくなる: プレフィックスを一つ変えるだけで、影響範囲を即座に特定できます。
最初は難しく感じるかもしれませんが、「文字列を型という小さな箱に閉じ込めて管理する」という感覚を掴めば、TypeScriptは最高の相棒になります。
さあ、あなたのプロジェクトにある「ただの `string`」を、テンプレートリテラル型で「意味のある型」に書き換えてみてください。そこから先の世界は、きっと今まで以上にクリアに見えるはずですよ。
それでは、また次回の深淵でお会いしましょう！