TL;DR

JavaScript のテンプレートリテラルと同じ構文を型の位置で使い、文字列リテラル型を組み立てる TypeScript の型。埋め込む型がユニオン型なら、すべての組み合わせの文字列リテラル型のユニオンになる。

なぜ必要か

TypeScript Handbook によると、テンプレートリテラル型を使うと、オブジェクトのプロパティ名から firstNameChanged のようなイベント名を作り、それ以外の文字列を渡すとコンパイルエラーにできる。文字列どうしの関係を型で表せる。

仕組み

リテラル型を埋め込むと、連結した新しい文字列リテラル型になる。埋め込む位置にユニオン型があれば、取りうるすべての文字列リテラル型のユニオンになり、複数のユニオンは掛け合わされる。ジェネリクスと組み合わせると、渡された文字列のテンプレートに当てはまる部分から型引数を推論することもできる。

Uppercase、Lowercase、Capitalize、Uncapitalize という文字列操作の型がコンパイラに組み込まれており、組み合わせて使える。

例

type Lang = "en" | "ja"
type ID = "welcome" | "footer"
type MessageID = `${Lang}_${ID}`
// "en_welcome" | "en_footer" | "ja_welcome" | "ja_footer"

注意点

Handbook は大きなユニオンを作るときは事前に生成しておくことを勧めており、この方法は小さなケースに向いている。

関連

出典