インターフェース 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)を使用します。
自分で試してみよう
このレッスンにはコードチャレンジは含まれていません。
このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
Introduction To TypeScriptのすべてのレッスン
2基本の型
基本の型: str, num, boolean'any' 型: 脱出ハッチ'unknown' 型'null' と 'undef' の扱い型推論の実践明示的な型アノテーションまとめ:基本の型の演習5型:エイリアス、ユニオン型、インターセクション型
プリミティブ型の型エイリアスユニオン型 ('|')ユニオン型の扱い方リテラル型インターセクション型 ('&')型エイリアスの組み合わせまとめ:高度な型の組み合わせ3データ構造:配列とタプル
型付き配列配列の 'readonly' 修飾子タプルとは?タプルの宣言とアクセスタプルの分割代入Readonly タプル多次元の型付き配列配列でのスプレッド演算子まとめ:配列とタプル6オブジェクトとインターフェースの型定義
インラインでのオブジェクト型アノテーションオブジェクトの型エイリアスインターフェース入門インターフェース vs 型エイリアスオプショナルと Readonly プロパティインターフェースと型の拡張インターフェースへのメソッドの追加まとめ:オブジェクトの構造定義自分で練習してみよう: JavaScriptオンラインコンパイラ