かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

TypeScript Union 型に含まれる値かどうか判定したい

例えばフォーム送信で取り扱う 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.

₍ ᐢ. ̫ .ᐢ ₎ できた。


[参考]

一挙放送見てアイカツ!熱が再び急上昇してる