テンプレートリテラル型

導入

"user_1" や "user_2" のように、決まった形をした文字列を扱いたいことがあります。JavaScript のテンプレートリテラル（`文字列${変数}`）と同じ書き方を、型の世界でも使えます。

説明

テンプレートリテラル型は、文字列の型を組み立てるための型です。

type UserId = `user_${number}`;

let id: UserId = "user_1";
console.log(id);
// let bad: UserId = "person_1"; // エラー: user_ で始まらない

ユニオン型と組み合わせると、複数のパターンをまとめて表現できます。

type EventName = `on${"Click" | "Hover"}`;   // "onClick" | "onHover"

let e: EventName = "onClick";
console.log(e);

CSS のクラス名やイベント名、APIのエンドポイントのように「決まった接頭辞・接尾辞を持つ文字列」を型で表現したいときに便利です。

やってみよう

EventName に "onFocus" を追加したいとき、EventName の定義をどう書き換えればよいか考えてみましょう。

演習

type UserId = `user_${number}`; を定義し、UserId 型の変数 id に "user_42" を入れて console.log(id) で表示してください。