例えばフォーム送信で取り扱う name 属性は決まっているから name 属性が Union型が用意されていて、何かしらのイベントから event.target.name
のような引数を渡された時に、フォームで取り扱う name 属性かどうかの型判定をしたいような場合。
type FieldNameTypes = 'foo' | 'bar' | 'baz'; input.addEventListener('change', (evt) => { const name = evt.currentTarget.name; // => この name 属性が FieldNameTypes に含まれるか判定したい });
Union 型を配列から生成するようにして、配列に含まれるかで判定する
const soleil = ['Ichigo', 'Aoi', 'Ran'] as const; type SoleilType = typeof soleil[number]; // SoleilType = 'Ichigo' | 'Aoi' | 'Ran'; const isSoleil = (name: string): name is SoleilType => { return soleil.some((value) => value === name); }; const test = (name: string): void => { if (isSoleil(name)) { // name => (parameter) name: "Ichigo" | "Aoi" | "Ran" console.log(`${name} is Soleil member!`); } // name => (parameter) name: string console.log(`${name} is not Soleil member`); }; test('Ichigo'); // => Ichigo is Soleil member! test('Yurika'); // => Yurika is not Soleil member.
₍ ᐢ. ̫ .ᐢ ₎ できた。
[参考]
- Enum の代わりに使う union 型 | CYOKODOG
- TypeScriptのユニオン型で「あるかもしれない」プロパティを表現するときのTips - uhyo/blog
- TypeScript: Array.includes on narrow types
- TypeScript で値が Union Type にマッチするかを検証したい