テンプレートリテラル型の基礎

型レベルの文字列

単純なテンプレートリテラル型

type Name = "Ada"
// type Greeting = template literal: Hello, then Name
// Greeting is the string literal type "Hello, Ada"
const g: "Hello, Ada" = "Hello, Ada"
console.log(g)

プレースホルダーにはほかの型を埋め込める

type World = "World"
// A template literal type with text Hello,  and placeholder World
// yields the literal "Hello, World"
const hw: "Hello, World" = "Hello, World"
console.log(hw)

ユニオン型の組み合わせでバリエーションが増える

type Side = "left" | "right"
// template: Side followed by -margin
// expands to "left-margin" | "right-margin"
const m: "left-margin" | "right-margin" = "left-margin"
console.log(m)

複数のプレースホルダーを組み合わせる

type Size = "sm" | "lg"
type Color = "red" | "blue"
// template Size-Color expands to 4 combinations
const c: "sm-red" | "sm-blue" | "lg-red" | "lg-blue" = "lg-blue"
console.log(c)

これが役立つ理由

type Prefix = "btn"
type Variant = "primary" | "ghost"
// template Prefix--Variant => "btn--primary" | "btn--ghost"
const cls: "btn--primary" | "btn--ghost" = "btn--primary"
console.log(cls)

数値と真偽値は文字列に変換される

type Id = 42
// template id- followed by Id => "id-42"
const x: "id-42" = "id-42"
console.log(x)

ジェネリックなプレースホルダーを使う

function prefixed<T extends string>(s: T) {
  return ("app-" + s) as "app-" extends string ? string : never
}
console.log(prefixed("home")) // app-home

入力を制約する

type Pixel = "left" | "right"
function setSide(s: Pixel) { return s }
console.log(setSide("left"))
// setSide("top") // Error: not assignable

ワイドなstring型ではパターンが失われる

const dynamic: string = "anything"
// a template using dynamic yields just string, not a precise literal
const result: string = "prefix-" + dynamic
console.log(result)

使用する場面

type Theme = "light" | "dark"
// template theme- followed by Theme => "theme-light" | "theme-dark"
const t: "theme-light" | "theme-dark" = "theme-dark"
console.log(t)

理解度チェック

まとめ