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

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

やりたいこと

typescript

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

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

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

as constでしばる

typescript

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[]でしばる

typescript

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に追加するとエラーで教えてくれます😁

satisfies Signal[]で優しくする

typescript

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だけに満足😇

Create by

nobuyuki.K

学校の先生→Web系エンジニア
Next.js / TypeScript / TailwindCSS / Notion が好き。

- Table of contents -

やりたいこと as const as Signal[]satisfies Signal[]

公開: 2023-04-25

更新: 2023-08-11

いいね: 0 件

コメント: 0 件

カテゴリ:

programming

タグ:

TypeScript

satisfies