0Pricing
TypeScript Academy · レッスン

構造的型付けと余分なプロパティチェック

TypeScriptの構造的型付けと、意図しないオブジェクト形状を防ぐ余分なプロパティチェックについて理解します

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

導入

目標：メンバーが適切に存在するかどうかで互換性が決まる構造的型付けと、オブジェクトリテラルでの過剰プロパティチェックの仕組みを学びます。

構造的型付け

構造的型付けでは、形状によって互換性が決まります。オブジェクトに必要なプロパティが少なくとも存在すれば、余分なプロパティがあっても受け入れられます。

interface Point { x: number; y: number; }

function logPoint(p: Point) {
  console.log(p.x, p.y);
}

const a = { x: 5, y: 7, z: 99 };
logPoint(a); // OK because it has x and y

名前による型付けと構造的型付け

名前的型システムとは異なり、Point2DとCoordは同じ構造を共有しているため互換性があります。

type Point2D = { x: number; y: number };
type Coord = { x: number; y: number };

const p: Point2D = { x: 1, y: 2 };
const q: Coord = p; // OK, same structure

過剰プロパティチェックでエラーになる場合

過剰プロパティチェックは、オブジェクトリテラルを直接代入するときに適用されます。対象の型にない余分なプロパティがあると、エラーになります。

interface User { id: number; name: string }

const u: User = { id: 1, name: "Ada", age: 30 }; // Error: excess property "age"

チェックの回避

変数を経由して代入すると、過剰プロパティチェックを回避できます。柔軟性が得られる一方で、意図しないプロパティには注意が必要です。

const raw = { id: 1, name: "Ada", age: 30 };
const u: User = raw; // OK, because variable assignment skips excess check

ガイドライン

ガイドライン：

  • 構造的型付けによって、TSは柔軟に利用できます。
  • 過剰プロパティチェックによって、間違いを早期に発見できます。
  • 追加フィールドが意図的な場合は、変数を使用してください。

構造的型付けの確認

確認問題：構造的型付けについて、正しい説明はどれですか？

まとめ

まとめ：TypeScriptは構造的型付けを使用しており、型はメンバーによって一致します。過剰プロパティチェックはオブジェクトリテラルを保護します。チェックを慎重に回避する方法も覚えておきましょう。

よくある質問

「構造的型付けと余分なプロパティチェック」レッスンは無料ですか？

はい。「構造的型付けと余分なプロパティチェック」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全3レッスンが含まれています。

「構造的型付けと余分なプロパティチェック」で何を学びますか？

TypeScriptの構造的型付けと、意図しないオブジェクト形状を防ぐ余分なプロパティチェックについて理解します ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「構造的型付けと余分なプロパティチェック」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. オブジェクト型、optional/readonly、インデックスシグネチャ
  2. InterfaceとType Aliasの比較
  3. 構造的型付けと余分なプロパティチェック
← TypeScript Academyに戻る