satisfiesと型注釈
形状を検証しながら、リテラル推論を維持します。
「satisfiesと型注釈」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
アノテーションパターン
従来の const config: Type = {...} パターンではオブジェクトが検証されますが、変数の型は Type になり、内部のリテラルが広い型に変わります。
type Config = { mode: string; level: number };
const config: Config = { mode: "dark", level: 5 };
// config.mode has type string
console.log(config.mode);型が広がるとどうなるか
アノテーションを付けると、config.mode は string になります。その値をリテラル "dark" を期待する変数に代入することはできません。
type Config = { mode: string };
const config: Config = { mode: "dark" };
// const m: "dark" = config.mode; // Error: string not assignable to "dark"
console.log(config.mode);satisfies パターン
const config = {...} satisfies Type とすると、変数は正確な推論型を保持しながら、Type に対してチェックされます。
type Config = { mode: string; level: number };
const config = { mode: "dark", level: 5 } satisfies Config;
// config.mode has type "dark"
console.log(config.mode);正確な推論の保持
これで config.mode はリテラル "dark" になり、絞り込まれた型が必要な場所で使用できます。
type Config = { mode: string };
const config = { mode: "dark" } satisfies Config;
const m: "dark" = config.mode; // OK
console.log(m);どちらも検証します
どちらのパターンも無効なオブジェクトを拒否します。違いは検証が行われるかどうかではなく、結果として得られる変数の型だけにあります。
type Config = { level: number };
// const a: Config = { level: "x" }; // Error
// const b = { level: "x" } satisfies Config; // Error
const ok = { level: 3 } satisfies Config;
console.log(ok.level);余分なプロパティも検出されます
アノテーションと同様に、satisfies は対象の型に存在しない余分なプロパティを検出し、キーのタイプミスを見つけやすくします。
type Config = { mode: string };
// const c = { mode: "dark", extar: true } satisfies Config; // Error: extar
const c = { mode: "dark" } satisfies Config;
console.log(c.mode);タプル性の保持
satisfies は、as const と組み合わせることで、要素の型を検証しながら配列のタプルに近い正確さを保つのにも役立ちます。
type Nums = readonly number[];
const xs = [1, 2, 3] as const satisfies Nums;
// xs is a readonly tuple [1, 2, 3], validated as numbers
console.log(xs.length);アノテーションは共用体のメンバーを広げます
フィールドが "a" | "b" のような共用体の場合、共用体として型付けしたアノテーションでは共用体のまま保持されますが、より広いフィールド型では型が広がります。satisfies は正確なメンバーを固定します。
type Config = { tier: string };
const withAnn: Config = { tier: "pro" }; // tier: string
const withSat = { tier: "pro" } satisfies Config; // tier: "pro"
console.log(withAnn.tier, withSat.tier);読み取り時の自動補完を維持する
satisfies はリテラルのキーと値を保持するため、エディターは広い宣言型ではなく、オブジェクトの正確な内容に基づいて自動補完できます。
type Theme = Record<string, string>;
const theme = { bg: "black", fg: "white" } satisfies Theme;
// theme.<autocomplete shows bg and fg>
console.log(theme.bg, theme.fg);使い分け
本当に広い型が必要な場合は通常のアノテーションを使用してください。検証しつつ、その後も正確に推論された形状が必要な場合は satisfies を使用してください。
type Config = { mode: string };
// Want wide type for reassignment flexibility -> annotation
let a: Config = { mode: "dark" };
// Want exact literals for later indexing -> satisfies
const b = { mode: "dark" } satisfies Config;
console.log(a.mode, b.mode);並べて比較したまとめ
アノテーションは型を広げ、satisfies は保持します。どちらも検証します。読み取り専用のconfigでは、通常 satisfies をデフォルトにするのが適しています。
type C = { color: string; size: number };
const widened: C = { color: "red", size: 1 };
const exact = { color: "red", size: 1 } satisfies C;
console.log(widened.color, exact.color);理解度チェック：satisfies とアノテーション
両者の違いを理解できているか確認しましょう。
まとめ：satisfies と型アノテーション
型アノテーションは検証を行いますが、リテラルを基底型に広げます。satisfies 演算子は検証し、正確な推論を維持するため、リテラル値、キー、タプルの正確さが保たれます。
type C = { mode: string };
const c = { mode: "dark" } satisfies C;
const exact: "dark" = c.mode;
console.log(exact);よくある質問
「satisfiesと型注釈」レッスンは無料ですか？
はい。「satisfiesと型注釈」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「satisfiesと型注釈」で何を学びますか？
形状を検証しながら、リテラル推論を維持します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「satisfiesと型注釈」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- satisfiesが存在する理由
- satisfiesと型注釈
- satisfiesとasアサーション
- satisfiesの実践的なパターン