TypeScript4.9のsatisfiesをﾁｮｯﾄ理解した

TypeScript4.9のsatisfiesをﾁｮｯﾄ理解した

TypeScript4.9くらいから追加されたsatisfiesの使い方と意味をﾁｮｯﾄ理解できたので,コードで直感的にわかるように説明してみます.

やりたいこと

const signals = [
  'red',
  'yellow',
  'green',
  'orange', // type errorにしたい
];  // 特定の色しかこの配列には入れたくないので

const color: string = 'red'; // 任意の色が入りたい

const isSignalColor = signals.includes(color); // 照合したい

as constでしばる

type Signal = 'red' | 'yellow' | 'green';

const signals = [
  'red',
  'yellow',
  'green',
  'orange', // not error
] as const;

const color: string = 'red';

const isSignalColor = signals.includes(color); // error

❌ orangeという文字列をsignalsに追加してもエラーになりません😵

❌「型 'string' の引数を型 '"red" | "yellow" | "green" | "orange"' のパラメーターに割り当てることはできません。」というエラーでincludesメソッドが使えません😵

as Signal[]でしばる

type Signal = 'red' | 'yellow' | 'green';

const signals = [
  'red',
  'yellow',
  'green',
  'orange', // error
] as Signal[];

const color: string = 'red';

const isSignalColor = signals.includes(color); // error

⭕ orangeという文字列をsignalsに追加するとエラーで教えてくれます😊

❌「型 'string' の引数を型 '"red" | "yellow" | "green" | "orange"' のパラメーターに割り当てることはできません。」というエラーでincludesメソッドが使えません😵

satisfies Signal[]で優しくする

type Signal = 'red' | 'yellow' | 'green';

const signals: string[] = [ // assertionを併用する
  'red',
  'yellow',
  'green',
  'orange', // error
] satisfies Signal[];

const color: string = 'red';

const isSignalColor = signals.includes(color); // true

⭕ orangeという文字列をsignalsに追加するとエラーで教えてくれます😊

⭕ includesメソッドが使えます😊

:string[]のassertionを併用することがポイントです.

これによって型推論はstring[]とするが,signalsの配列自体はSignal[]の型でしばることができます.

こう考えると使いどころが増えてきそうです.

この手法が始めてsatisfiesの利用法として納得できたので記事にしてみました.

satisfiesだけに満足😊