Menu
Coddy logo textTech

インターフェース vs 型エイリアス

CoddyのJavaScriptジャーニー「Introduction To TypeScript」セクションの一部。レッスン 40/73。

オブジェクトの形状を定義するための型エイリアスとインターフェースの両方について学んだところで、それぞれの手法をいつ使用すべきかを理解することが重要です。これらは同様の目的を果たしますが、選択に影響を与える可能性のある重要な違いがあります。

共通点: インターフェースと型エイリアスはどちらも、同じレベルの型安全性でオブジェクトの構造を定義できます。どちらのアプローチを使用しても、必須プロパティ、オプションのプロパティ、および readonly プロパティを指定できます。また、どちらも他の型との拡張や結合をサポートしています。

主な違い - 宣言のマージ (Declaration Merging): 最も大きな違いは、インターフェースは宣言のマージ (declaration merging)をサポートしているのに対し、型エイリアスはサポートしていない点です。これは、同じインターフェースを複数回宣言することができ、TypeScript は自動的にすべての宣言を単一のインターフェースにマージすることを意味します:

interface User {
  name: string;
}

interface User {
  age: number;
}

// TypeScript はこれらを次のようにマージします:
// interface User {
//   name: string;
//   age: number;
// }

型エイリアスで同じアプローチを試みると、TypeScriptは重複した識別子に関するエラーをスローします。このマージ機能により、ライブラリを使用する場合や、コードベースの異なる部分で既存の型定義を拡張する必要がある場合に、インターフェースは特に便利になります。

選択の基準: 後で拡張やマージが必要になる可能性があるオブジェクトの形状を定義する場合は、interfaceを使用します。Union型やIntersection型のようなより複雑な型操作が必要な場合、またはプリミティブ型を扱う場合は、型エイリアス(type alias)を使用します。

自分で試してみよう

このレッスンにはコードチャレンジは含まれていません。

quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

Introduction To TypeScriptのすべてのレッスン

自分で練習してみよう: JavaScriptオンラインコンパイラ