TypeScript テンプレートリテラル型

テンプレートリテラル型は文字列リテラル型に基づいて構築され、補間によって新しい文字列型を生成できます。

これにより、TypeScript は文字列に対してより正確な型チェックを行うことができ、イベント名、パス、クラス名などのシーンに適しています。

SVG 図解：テンプレートリテラル型背景 タイトル テンプレートリテラル型の仕組み入力型 入力型 type Event = "click" | "focus" type Method = "get" | "post" 矢印 テンプレート テンプレートリテラル テンプレートリテラル型 type Name = `on${Capitalize}` type Path = `${Method}:/${string}` 矢印出力型 出力型 "onClick" "onFocus" "get:/..." 下半分：組み込みユーティリティ型 組み込みユーティリティ型 Uppercase "hello" → "HELLO" Lowercase "HELLO" → "hello" Capitalize "hello" → "Hello" Uncapitalize "Hello" → "hello"矢印マーク

なぜテンプレートリテラル型が必要なのか

開発では、イベント名（onClick）、API パス（get:/users）、CSS クラス名（btn-primary-md）など、フォーマットされた文字列を頻繁に扱う必要があります。

通常の string 型ではこれらのフォーマットを正確に記述できませんが、テンプレートリテラル型を使用すると、これらの文字列の型を正確に定義できます。

これにより、TypeScript の型安全性が大幅に向上し、実行時エラーが減少します。

概念の説明：テンプレートリテラル型はバッククォート（`` ` ``）と${}補間構文を使用して文字列型を定義します。これは JavaScript のテンプレート文字列に似ていますが、型レベルで使用されます。

基本構文

テンプレートリテラル型は、バッククォートと補間を使用して型を定義します。

例

// 基本的な文字列リテラル型を定義
type World = "world";

// テンプレートリテラル型を使用
// `Hello ${World}` は "Hello world" に相当
type Greeting = `Hello ${World}`;

// 型定義に一致する文字列のみ代入可能
var greeting: Greeting = "Hello world";
console.log("挨拶: " + greeting);

実行結果：

问候: Hello world

説明：テンプレートリテラル型は、補間の位置を実際の文字列に置き換えて、新しいリテラル型を生成します。

組み込みユーティリティ型

TypeScript は、文字列の大文字小文字を処理するための4つの組み込みユーティリティ型を提供しています。

例

// Uppercase：文字列を大文字に変換
type UpperHello = Uppercase<"hello">;  // "HELLO"

// Lowercase：文字列を小文字に変換
type LowerHELLO = Lowercase<"HELLO">;  // "hello"

// Capitalize：文字列の先頭文字を大文字に変換
type CapitalizedHello = Capitalize<"hello">;  // "Hello"

// Uncapitalize：文字列の先頭文字を小文字に変換
type UncapitalizedHello = Uncapitalize<"Hello">;  // "hello"

console.log("Uppercase: " + UpperHello);
console.log("Lowercase: " + LowerHELLO);
console.log("Capitalize: " + CapitalizedHello);
console.log("Uncapitalize: " + UncapitalizedHello);

実行結果：

Uppercase: HELLO
Lowercase: hello
Capitalize: Hello
Uncapitalize: hello

適用シーン：これらのユーティリティ型は、イベント名やメソッド名など、形式を統一する必要があるシーンで非常に役立ちます。

イベント型

テンプレートリテラル型を使用すると、イベント名の型を正確に定義できます。

例

// イベント名の型を構築
// `on${Capitalize<string>}` は "on" で始まり、先頭が大文字の文字列を生成
type EventName = `on${Capitalize<string>}`;
// `handle${Capitalize<string>}` は "handle" で始まり、先頭が大文字の文字列を生成
type Handler = `handle${Capitalize<string>}`;

// 形式に一致する文字列のみ代入可能
var clickEvent: EventName = "onClick";
var focusEvent: EventName = "onFocus";
var handler: Handler = "handleSubmit";

console.log("イベント: " + clickEvent);
console.log("ハンドラー: " + handler);

実行結果：

事件: onClick
处理器: handleSubmit

利点：テンプレートリテラル型を使用すると、"onclick"（小文字）のような誤った形式は TypeScript によって拒否されます。

パス型

テンプレートリテラル型を使用すると、API パスの型を正確に定義できます。

例

// HTTP メソッドの型を定義
type HttpMethod = "get" | "post" | "put" | "delete";

// パスの形式を定義
type ApiEndpoint = `/${string}`;  // スラッシュで始まる文字列

// 組み合わせて完全な API パス型を作成
type ApiPath = `${HttpMethod}${ApiEndpoint}`;

// 形式に一致するパスのみ代入可能
var getUsers: ApiPath = "/get/users";
var createUser: ApiPath = "/post/users";

console.log("パス: " + getUsers);
console.log("パス: " + createUser);

実行結果：

路径: /get/users
路径: /post/users

型安全性："/users"（メソッドのプレフィックスがない）のようなパスは TypeScript でエラーになります。

複雑な例

テンプレートリテラル型は複数のユニオン型を組み合わせて、可能なすべての組み合わせを生成できます。

例

// 数字を含むテンプレート型
// ${number} は任意の数字に一致
type Row = `row${number}`;
type Row10 = Row;  // row0, row1, row2... から row9... まで

// 複数の型を組み合わせる
type Variant = "primary" | "secondary";
type Size = "sm" | "md" | "lg";
// これにより6つの組み合わせが生成されます：btn-primary-sm, btn-primary-md, btn-primary-lg...
type ClassName = `btn-${Variant}-${Size}`;

// 生成された6つの組み合わせのいずれかのみ代入可能
var className: ClassName = "btn-primary-md";
console.log("クラス名: " + className);

実行結果：

类名: btn-primary-md

組み合わせ爆発：テンプレートリテラル型はすべての組み合わせを自動的に展開します。ユニオン型に多くのオプションがある場合、生成される型は非常に大きくなる可能性があります。

カスタムユーティリティ型

独自のテンプレートリテラルユーティリティ型を作成できます。

例

// プレフィックスを追加するユーティリティ型
// T は任意の文字列、P は追加するプレフィックス
type Prefix<T extends string, P extends string> = `${P}${Capitalize<T>}`;

// サフィックスを追加するユーティリティ型
// T は任意の文字列、S は追加するサフィックス
type Suffix<T extends string, S extends string> = `${Capitalize<T>}${S}`;

// カスタムユーティリティ型を使用
type HandlerName = Prefix<"click", "on">;
type ButtonId = Suffix<"submit", "Btn">;

var handler: HandlerName = "onClick";
var id: ButtonId = "SubmitBtn";

console.log("ハンドラー: " + handler);
console.log("ID: " + id);

実行結果：

处理器: onClick
ID: SubmitBtn

ジェネリックテンプレート：テンプレートリテラル型はジェネリックと組み合わせて、再利用可能なユーティリティ型を作成できます。

注意事項

  • 補間の型：テンプレート内の${}は、具体的な文字列、ユニオン型、string、number などにすることができます
  • 組み合わせ数：複数のユニオン型を組み合わせると、生成される型が非常に大きくなる可能性があります
  • 大文字小文字の処理：組み込みユーティリティ型を使用して文字列の大文字小文字を処理します

ベストプラクティス：イベント名、パス、クラス名など、固定フォーマットの文字列をテンプレートリテラル型で処理すると、より良い型安全性が得られます。

まとめ

テンプレートリテラル型は、TypeScript の強力な型システムの一部です。

  • テンプレート構文：補間を使用して${T}型を構築
  • 組み込みユーティリティ：Uppercase、Lowercase、Capitalize、Uncapitalize
  • 適用シーン：イベント名、API パス、CSS クラス名など
  • カスタム：再利用可能なユーティリティ型を作成

推奨：文字列をフォーマットする必要があるシーンでは、テンプレートリテラル型を優先的に使用して、コンパイル時の型チェックを得ましょう。

その他の拡張