🦔

typescriptのsatisfiesをちょっと調べた

に公開

どんなもの?

typescriptサバイバルより引用。

*satisfies T(Tは型)は、変数宣言時に使用する演算子で、その値が型Tを満たすことを検証します。この演算子は型の絞り込みを保持したまま型チェックを行える特徴があります。
as constと異なり、satisfiesはその後に型を要求します。単独で使用することはできません。*

文法的には satisfies T らしいです。

const user = {
	name: string
} satisfies UserType // <- これ!

ちなみに、型アノテーションと違う部分も書いてありました。

型アノテーションとちがうこと

satisfiesの最大の特徴は、型Tにユニオン型が含まれる場合でも、実際の値に基づいて型を絞り込むことができる点です。型アノテーションでは失われてしまう型の情報を保持できます。
主にオブジェクトリテラルや配列で使用しますが、プリミティブ型でも使用できます

型推論 + 型のチェックをしてくれる「いいとこ取り」 的なもの。

const array1: (string | number)[] = [1, 2, 3] // 型アノテーション:number型しかないのに (string | number)のユニオンになっているのがモヤっと

const array2 = [1, 2, 3] satisfies (string | number)[] // 値を確認し、型を推論するので以降number[]になる

// satistiesをつけていない場合との比較
const array3 = [1, 2, 3] // number[]

const array4 = [1, "2", 3] satisfies number[] // 推論結果、number[]じゃない場合は型エラーになる!

いつ使う?

色々場面はあると思いますが、「設定用系の変数」を「型チェックをしつつ値も直接参照したいとき」に活躍しそうです。(というかすでにそのようなコードをたくさん見ますね。)

type Color = "red" | "green" | "blue";

const palette = {
  primary: "red",
  secondary: "green", 
  accent: "blue"
} satisfies Record<string, Color>;

// paletteのキーが正確に推論される
palette.primary // "red"として推論
palette.secondary // "green"として推論

// 従来の型注釈だと...
const palette2: Record<string, Color> = {
  primary: "red",
  secondary: "green",
  accent: "blue"
};
palette2.primary // Color型として推論(具体的な値ではない)

より詳しい記事があったので見ていただいた方がいいと思います。
https://zenn.dev/makoto1995/articles/ts-satisfies

Discussion