50. テンプレートリテラル型と文字列操作型

テンプレートリテラル型は、文字列のテンプレートリテラルと同じ `...${...}` の構文を型の世界で使う機能です。たとえば type HandlerKey = `on${"Click" | "Hover"}` と書くと "onClick" | "onHover" というユニオン型が生成されます。リテラル型のユニオンを渡すと組み合わせが自動で展開されるのが強力な点です。

TypeScript には文字列を加工する組み込み型も用意されています。Uppercase<T> は大文字化、Lowercase<T> は小文字化、Capitalize<T> は先頭だけ大文字化したリテラル型を作ります。イベント名や API のキー名など「命名規則が機械的に決まる文字列」の型を、手書きせずに導出できます。

つまずきポイントは、これがあくまで型レベルの変換だということです。実行時に文字列を大文字にするのは toUpperCase メソッドの仕事で、型はその結果に合う形を表すだけです。型を書いても実行時の値は1文字も変わりません。

▶ サンプルコードを実行してみよう(自由に書き換えてOK)

TypeScript

// 言語コードのリテラル型ユニオン
type LangCode = "ja" | "en" | "fr";

// Uppercase は各リテラルを大文字化した型を作る
type UpperLangCode = Uppercase<LangCode>; // "JA" | "EN" | "FR"
const region: UpperLangCode = "JA";
console.log(region);

// Capitalize は先頭だけ大文字に: 命名規則を型で表せる
type EventKind = "click" | "hover";
type HandlerName = Capitalize<EventKind>; // "Click" | "Hover"
const handlerKind: HandlerName = "Click";
console.log(handlerKind);

// 実行時の変換は toUpperCase の仕事(型と実行時は別物)
console.log("ja".toUpperCase());

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗