テンプレートリテラル型とは
TypeScriptではテンプレートリテラル型やインデックスシグネチャを使用して、文字列のパターンなどを表現できます。
テンプレートリテラル型やインデックスシグネチャを使用したコード例を以降に3つ示します。
1. 基本的なテンプレートリテラル型
`${string}@gmail.com` のようにテンプレートリテラル型を作り、型に合わない場合は警告を表示します。
TypeScript
type Gmail = `${string}@gmail.com`
const gmail: Gmail = 'example@gmail.com'
const notGmail: Gmail = 'example@mail.com'
// Type '"example@mail.com"' is not assignable to type '`${string}@gmail.com`'2. インデックスシグネチャ
任意の文字列プロパティ（iはプロパティ名の一時的な名前）を数値として持つことができます。
TypeScript
type FruitStock = {
apple: number
[i: string]: number
}
const fruit: FruitStock = { apple: 1 }
fruit.banana = 3
fruit.peach = '5'
// Type 'string' is not assignable to type 'number'3. テンプレートリテラル型とインデックスシグネチャ
テンプレートリテラル型とインデックスシグネチャを使って、イベント名とそのハンドラーを定義しています。
TypeScript
type EventName<T extends string> = `on${Capitalize<T>}Event`
type ClickEvent = EventName<'click'>
type DoubleclickEvent = EventName<'doubleclick'>
type ChangeEvent = EventName<'change'>
type Handler<T extends string> = {
[K in EventName<T>]: () => void
}
const handlers: Handler<'click' | 'doubleclick' | 'change'> = {
onClickEvent: () => {
console.log('Click event handler')
},
onDoubleclickEvent: () => {
console.log('Double click event handler')
},
onChangeEvent: () => {
console.log('Change event handler')
},
}
function triggerEvent(event: ClickEvent | DoubleclickEvent | ChangeEvent) {
handlers[event]()
}
triggerEvent('onClickEvent')
triggerEvent('onDoubleclickEvent')
triggerEvent('onChangeEvent')
