[[テンプレートリテラル (TypeScript)|テンプレートリテラル]]の記法をベースにした[[TypeScript]]の型表現方法。文字列の[[ユニオン型 (TypeScript)|ユニオン型]]と組み合わせ使うと、組み合わせパターンを簡単に表現できる。
たとえば以下の様な共通ルールをもつ型を表現したい。
```ts
type TickatStatus = "ticket is open" | "ticket is in progress" | "ticket is done"
type WorkerStatus = "worker is open" | "worker is in progress" | "worker is done"
// ...他にもたくさん
```
[[テンプレートリテラル型]]を使えば以下のように表現できる。
```ts
type Status = "open" | "in progress" | "done";
type TickatStatus = `ticket is ${Status}`;
type WorkerStatus = `worker is ${Status}`;
```
リテラルは2つ以上でも指定できる。たとえば[[テンプレートリテラル型]]を使った以下のコード。
```ts
type CallbackEvent = "Open" | "Click" | "Done";
type Target = "Button" | "Form" | "AppIcon"
type CallbackEventName = `on${CallbackEvent}${Target}`;
```
これは以下と同じ意味になる。単調作業が減るはずだ。
```ts
type CallbackEventName =
| "onOpenButton"
| "onOpenForm"
| "onOpenAppIcon"
| "onClickButton"
| "onClickForm"
| "onClickAppIcon"
| "onDoneButton"
| "onDoneForm"
| "onDoneAppIcon";
```
## Template Literal Typesを補助するビルドインtypes
以下のような型を使うと便利。
| 型 | 説明 |
| ------------ | -------------------- |
| Uppercase | すべてを大文字にする |
| Lowercase | すべてを小文字にする |
| Capitalize | 先頭を大文字にする |
| Uncapitalize | 先頭を小文字にする |
たとえば、先ほど定義した`CallbackEventName`について。`CallbackEvent`と`Target`は先頭が小文字で定義されているとする。
```ts
type CallbackEvent = "open" | "click" | "done";
type Target = "button" | "form" | "appIcon"
```
それでも`Capitalize`を使えば、既に定義された型を利用できる。
```ts
type CallbackEvent = "open" | "click" | "done";
type Target = "button" | "form" | "appIcon"
// Capitalize<CallbackEvent> は "Open" | "Click" | "Done"
// Capitalize<Target> は "Button" | "Form" | "AppIcon"
type CallbackEventName = `on${Capitalize<CallbackEvent>}${Capitalize<Target>}`;
```