0Pricing
TypeScript Academy · レッスン

satisfiesとasアサーション

asによるキャストよりsatisfiesが安全な理由を学びます。

「satisfiesとasアサーション」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。

as の働き

as アサーションは、型について自分を信じるようコンパイラーに指示します。値が実際に適合するかはチェックせず、推論された型を上書きするだけです。

const value = { color: "red" } as { color: string; size: number };
// No error even though size is missing!
console.log(value.color);

as は安全性を回避します

as は検証を省略するため、実際のバグを隠す可能性があります。上のオブジェクトには size がありませんが、TypeScript は何も報告しません。

type Config = { color: string; size: number };
const broken = { color: "red" } as Config;
// broken.size is typed number but is actually undefined at runtime
console.log(broken.size); // undefined

satisfies は代わりに検証します

as を satisfies に置き換えると、オブジェクトが実際に型と一致する必要があるため、その気付かれなかったバグが明確なコンパイルエラーになります。

type Config = { color: string; size: number };
// const c = { color: "red" } satisfies Config; // Error: size missing
const c = { color: "red", size: 10 } satisfies Config;
console.log(c.size);

as は誤った型を強制できます

二重アサーションを使えば、完全に互換性のない型をアサーションすることさえできます。これは危険なため、使用はまれにするべきです。

const n = "hello" as unknown as number;
// n is typed number but is actually a string
console.log(typeof n); // "string"

satisfies は値について偽りません

as とは異なり、satisfies を使って互換性のない型だと主張することはできません。値がすでに適合していることを確認するだけです。

// const x = "hello" satisfies number; // Error: string not assignable to number
const y = 42 satisfies number;
console.log(y);

as では余分なプロパティチェックが失われます

as を使うと、余分なキーやスペルを間違えたキーが見逃されます。satisfies では引き続き検出されるため、タイプミスを見つけられます。

type Config = { mode: string };
const withAs = { mdoe: "dark" } as Config;   // typo passes silently
// const withSat = { mdoe: "dark" } satisfies Config; // Error: mdoe
console.log(JSON.stringify(withAs));

as が正当に必要な場面

as には、実行時チェック後に unknown の型を絞り込む場合や、DOM を扱う場合など、正当な用途があります。ただし、config オブジェクトには satisfies を優先してください。

const data: unknown = JSON.parse("{ }");
// After your own runtime validation, as can express the result.
const obj = data as Record<string, unknown>;
console.log(typeof obj);

config には satisfies を優先する

設定、ルートマップ、パレットでは、satisfies によって検証と正確な推論の両方が得られます。as からは検証も保証も得られません。

type Palette = Record<string, string>;
const safe = { primary: "blue", accent: "gold" } satisfies Palette;
console.log(safe.primary);

as const は別物です

as const を型アサーションと混同しないでください。as const はリテラルまで型を絞り込み、値を読み取り専用にします。安全な機能であり、satisfies と組み合わせて使うこともよくあります。

type Nums = readonly number[];
const xs = [1, 2, 3] as const satisfies Nums;
console.log(xs[0]);

リスクのまとめ

as:コンパイラーを上書きし、チェックを行わず、バグを隠す可能性があります。satisfies:コンパイラーと連携し、完全にチェックしながら推論を保持します。デフォルトでは satisfies を選択してください。

type Config = { level: number };
// const risky = {} as Config; // compiles, level is undefined
const safe = { level: 1 } satisfies Config;
console.log(safe.level);

as から satisfies へのリファクタリング

よい習慣として、自分で管理しているリテラルに as SomeObjectType がある場合は、satisfies への切り替えを試し、表示されたエラーを修正してください。

type Config = { url: string; retries: number };
// Before: const c = { url: "/api" } as Config;
const c = { url: "/api", retries: 3 } satisfies Config;
console.log(c.url, c.retries);

理解度チェック:satisfies と as

satisfies と as の違いを理解できているか確認しましょう。

まとめ:satisfies と as アサーション

as はチェックを回避してバグを隠す可能性がある一方、satisfies は値を検証し、正確な推論を保持することを学びました。自分で管理しているconfigオブジェクトには satisfies を優先してください。

type Config = { color: string; size: number };
const c = { color: "red", size: 10 } satisfies Config;
console.log(c.color, c.size);

よくある質問

「satisfiesとasアサーション」レッスンは無料ですか?

はい。「satisfiesとasアサーション」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「satisfiesとasアサーション」で何を学びますか?

asによるキャストよりsatisfiesが安全な理由を学びます。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「satisfiesとasアサーション」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか?

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. satisfiesが存在する理由
  2. satisfiesと型注釈
  3. satisfiesとasアサーション
  4. satisfiesの実践的なパターン
← TypeScript Academyに戻る