satisfies演算子
| 対応: | TypeScript 4.9(2022) |
|---|
『satisfies』演算子は、値が特定の型を満たしているかを検証しながら、推論された型をそのまま保持します。型注釈(コロン)を使うと型が広がってしまう場合に、より精密な型情報を保ちつつ型チェックができます。TypeScript 4.9 で追加されました。
構文
const value = expression satisfies Type;
as・型注釈との比較
| 書き方 | 型チェック | 推論される型 |
|---|---|---|
| const x: Type = value | あり | Type(広い型になる) |
| const x = value as Type | なし(強制キャスト) | Type(危険) |
| const x = value satisfies Type | あり | value の実際の型(狭い型を保持) |
サンプルコード
// 型注釈(: Record)を使うと string | string[] に広がってしまう
type Config = Record<string, string | string[]>;
// : Config を使った場合
const config1: Config = {
port: '3000',
hosts: ['localhost', 'example.com'],
};
// config1.port は string | string[] として認識される
// config1.port.toUpperCase(); // エラー: string | string[] に toUpperCase はない
// satisfies を使った場合
const config2 = {
port: '3000',
hosts: ['localhost', 'example.com'],
} satisfies Config;
// config2.port は string 型として保持される
console.log(config2.port.toUpperCase()); // OK: 'PORT' → '3000'
// config2.hosts は string[] 型として保持される
console.log(config2.hosts.join(', ')); // OK
// 型チェックは機能する(誤った値はエラーになる)
const bad = {
port: 3000, // エラー: number は string | string[] に代入できない
} satisfies Config;
// カラーパレットの例
type Color = { r: number; g: number; b: number } | string;
const palette = {
red: { r: 255, g: 0, b: 0 },
blue: '#0000ff',
} satisfies Record<string, Color>;
// red はオブジェクト型、blue は string 型として保持される
console.log(palette.red.r); // OK: 255
console.log(palette.blue.toUpperCase()); // OK: '#0000FF'
実行すると次のように出力されます。
npx ts-node ts_satisfies.ts 3000 localhost, example.com 255 #0000FF
概要
『satisfies』は「型チェックはしたいが、推論された具体的な型情報も失いたくない」というケースで力を発揮します。型注釈(: 型)を使うと、TypeScript が推論する型が指定した型に固定され、リテラル型などの詳細な型情報が失われることがあります。型注釈(『:』)を使うと変数の型が指定した型に固定されてしまうため、プロパティごとの詳細な型情報が失われます。
『as』を使った型アサーションは型チェックを行わないため、誤った型を指定してもエラーになりません。一方『satisfies』は型チェックを行いながら、元の推論型をそのまま保持するという点で、両者の長所を組み合わせた演算子です。
設定オブジェクト・カラーパレット・ルートテーブルなど、各プロパティの型が異なるオブジェクトリテラルを扱う際に特に有用です。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。