Freshnessと余分なプロパティチェック
一部のコンテキストで余分なプロパティがエラーになる理由を確認します。
「Freshnessと余分なプロパティチェック」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
Freshnessとは
Freshnessとは、作成時点のオブジェクトリテラルをTypeScriptが「fresh」とみなす概念です。freshなオブジェクトには、拡大されたオブジェクトには適用されない厳密な余剰プロパティチェックが行われます。
interface Point { x: number; y: number; }
const p: Point = { x: 1, y: 2, z: 3 }; // Error: 'z' not in Point余剰プロパティチェックの動作
オブジェクトリテラルを型付き変数に直接代入したり、関数の引数として渡したりすると、TypeScriptは対象の型にない余分なプロパティを報告します。
function setPoint(p: { x: number; y: number }) {}
setPoint({ x: 1, y: 2, z: 3 }); // Error: 'z' excess property余剰プロパティチェックが存在する理由
JavaScriptでよくあるバグの原因である、設定オブジェクト内のタイプミスや意図しないプロパティを検出できます。
interface Options { timeout: number; retry?: boolean; }
const opts: Options = { timeout: 3000, retrey: true }; // Error — typo!Freshnessが失われる仕組み
オブジェクトリテラルを中間変数に代入すると、それは「fresh」ではなくなり、拡大された型には余剰プロパティチェックが適用されません。
const opts = { timeout: 3000, retry: true, extra: "surprise" };
const o: Options = opts; // No error — freshness lost on assignment型アサーションによるFreshnessの回避
as型アサーションを使用すると、余剰プロパティチェックも回避されるため、バグが隠れる可能性があります。
const o = { timeout: 3000, typo: true } as Options; // No error交差型での余剰プロパティチェック
余分なプロパティが交差型の構成要素のいずれかに属する可能性があるため、交差型によって余剰プロパティチェックが緩和される場合があります。
type A = { x: number };
type B = { y: number };
const ab: A & B = { x: 1, y: 2 }; // OKreadonlyと余剰プロパティ
readonlyオブジェクト型にも余剰プロパティチェックは適用されます。このルールは変更可能性ではなく、構造上の形状に関するものです。
interface Cfg { readonly host: string; }
const c: Cfg = { host: "localhost", port: 3000 }; // Errorインデックスシグネチャと余剰プロパティ
型にインデックスシグネチャを追加すると、文字列をキーとする追加プロパティを任意に許可でき、その型に対する余剰プロパティチェックは実質的に無効になります。
interface Flexible { name: string; [key: string]: unknown; }
const f: Flexible = { name: "ts", extra: true }; // OKオプショナルプロパティとFreshness
オプショナルプロパティによって余剰プロパティチェックが緩和されることはありません。まったく列挙されていないプロパティは、オプショナルであっても余剰プロパティとして報告されます。
interface Shape { color?: string; }
const s: Shape = { color: "red", size: 10 }; // Error: 'size' excess実践的なパターン
型付きインターフェースを通して追加の設定プロパティをエラーなしで渡すには、中間変数を使用するか、インターフェースにインデックスシグネチャを追加します。
// Option 1: intermediate variable (freshness lost)
const cfg = { timeout: 3000, debugMode: true };
const o: Options = cfg;
// Option 2: index signature in interfaceまとめ：Freshness
Freshnessはfreshなオブジェクトリテラルに適用され、代入時点での余剰プロパティチェックを可能にします。追加のpropsを許可するには、中間変数に代入するか、インデックスシグネチャを使用します。
クイックチェック
余剰プロパティチェックが適用されないのはいつですか。
学んだこと
Freshnessと余剰プロパティチェックによって、オブジェクトリテラル内のタイプミスや意図しないプロパティから保護されます。予期しない型エラーや隠れたバグを避けるために、Freshnessが失われるタイミングを理解しましょう。
よくある質問
「Freshnessと余分なプロパティチェック」レッスンは無料ですか？
はい。「Freshnessと余分なプロパティチェック」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「Freshnessと余分なプロパティチェック」で何を学びますか？
一部のコンテキストで余分なプロパティがエラーになる理由を確認します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「Freshnessと余分なプロパティチェック」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 型のWideningとNarrowingの仕組み
- Contextual Typing：コンテキストからの推論
- Freshnessと余分なプロパティチェック
- constアサーションとas const