プロフィール
TypeScript PR

TypeScriptのsatisfiesキーワードとは？型注釈やUnion型との違いを徹底解説

 
記事内に商品プロモーションを含む場合があります

TypeScript では型安全性を向上させるための機能が多くありますが、その中でも比較的新しい機能である satisfies キーワード は、初心者には少し分かりづらいものです。「普通の型注釈や Union 型で十分では？」と思われるかもしれませんが、実は satisfies にはユニークな役割があります。

この記事では、satisfies と型注釈・ Union 型との違いを丁寧に解説し、その活用法を具体例とともに学んでいきます。

Contents
  1. 型注釈(Type Annotation)とUnion型の復習
  2. satisfies とは？
  3. satisfies と型注釈の違い
  4. satisfies と Union 型の違い
  5. satisfies の実用例
  6. satisfies を使うべきケース
  7. まとめ

型注釈(Type Annotation)とUnion型の復習

型注釈の基本

型注釈では、変数や関数に対して「どの型を持つべきか」を明示的に指定します。

const value: number = 42; // 型注釈で number を指定

Union型

Union 型は複数の型を許容する場合に使われます。

const value: string | number = "hello"; // string か number のどちらか

これらは非常に基本的かつ強力ですが、ある場面では「型の正確な保証」や「プロパティの過不足チェック」が不足することがあります。

satisfies とは？

as const や型注釈がよく使われるケースで、TypeScript 4.9 で導入された satisfies は、型の安全性をさらに高めるためのキーワードです。簡単に言うと、「値が指定した型を満たしていることを保証するが、その型に制限はしない」仕組みを提供します。

satisfies の基本的な構文

const settings = {
    theme: "dark",
    layout: "grid",
} satisfies { theme: "dark" | "light"; layout: "grid" | "list" };

ここで、settings は { theme: "dark"; layout: "grid" } と推論されます。しかし、satisfies を使うことで、次のことが保証されます：

  1. theme と layout が型 { theme: "dark" | "light"; layout: "grid" | "list" } に一致していること。
  2. 値の過不足チェックが有効になる。

satisfies と型注釈の違い

型注釈 では、以下のように値全体の型を制限します：

const settings: { theme: "dark" | "light"; layout: "grid" | "list" } = {
    theme: "dark",
    layout: "grid",
};

この場合、型注釈の型以外のプロパティを持つとエラーになります。つまり、型が「厳密」で、冗長なプロパティは許容されません。

一方、satisfies では型制約は満たしますが、推論される型は元の値に基づきます。以下のように拡張性が確保されます：

const settings = {
    theme: "dark",
    layout: "grid",
    customProp: "example",
} satisfies { theme: "dark" | "light"; layout: "grid" | "list" };
// customProp は保持されるが、型チェック時には無視される

この柔軟性が satisfies の最大の利点です。

satisfies と Union 型の違い

Union 型の場合

Union 型を使うと、複数の型のいずれかを満たす必要があります。しかし、Union 型は一部のプロパティの過不足チェックが弱い場合があります。

type Config = { theme: "dark" | "light" } | { layout: "grid" | "list" };

const config: Config = {
    theme: "dark",
    // layout が欠けていてもエラーにならない
};

Union 型 は「いずれかの型に適合すれば良い」という性質があるため、厳密な型保証が難しいのです。

satisfies の場合

satisfies を使うことで、型の過不足をチェックしつつ、推論の自由度を保てます：

const config = {
    theme: "dark",
} satisfies { theme: "dark" | "light"; layout: "grid" | "list" };
// エラー：layout プロパティが不足している

satisfies の実用例

  1. オブジェクトのプロパティを制限したい場合
    • 必須プロパティだけを型チェックし、余分なプロパティを保持。
  2. ユーティリティ型との組み合わせ
    • Pick や Record と組み合わせて柔軟な型を扱う。
type ThemeSettings = { theme: "dark" | "light"; layout: "grid" | "list" };

const userSettings = {
    theme: "dark",
    layout: "list",
    otherOption: "enabled",
} satisfies ThemeSettings; // 他のプロパティは型チェックに影響しない

satisfies を使うべきケース

  • 型注釈では厳しすぎるが、ある程度の制約が必要な場合。
  • Union 型がプロパティ過不足チェックを満たせない場合。
  • 定数の型をそのまま維持したい場合。

まとめ

TypeScript の satisfies は、型注釈や Union 型にはない柔軟性と安全性を提供します。特に、プロパティの過不足チェックや型の推論を活用する場面では、その真価を発揮します。

「型安全性」と「柔軟性」のバランスを取りたい場合にぜひ活用してみてください！

RELATED POST