Programmingフルスタック開発者

TypeScriptにおけるインターフェース(interface)と型エイリアス(type alias)について説明してください。それぞれの違いは何ですか?どのような場合にどちらのアプローチを選ぶべきですか?

Hintsage AIアシスタントで面接を突破

回答。

両方のメカニズム、interfacetype aliasは、データ構造(オブジェクト、関数、複雑な型)を記述するために使用されます。

  • Interface — クラシックなインターフェースの宣言。インターフェースを拡張したり、結合(declaration merging)したり、簡単に継承したりできます。
  • Type alias — 新しい型の別名を作成します。ユニオン(union)やインターセクション(intersection)によって組み合わせることができ、プリミティブ、関数、タプルなど任意のエンティティに割り当てることができます。

違い:

  • 拡張性: インターフェースはオブジェクト構造に適しており、宣言的な結合をサポートします。
  • 柔軟性: 型エイリアスは汎用的で、すべてに適用でき、ユニオン(|)とインターセクション(&)に対して使用できます。

例:

interface Animal { name: string } interface Dog extends Animal { bark(): void } // 型エイリアスによる型の結合: type MyType = string | number type Cat = Animal & { purr(): void }

推奨:

  • 公開APIにはinterfaceを使用することをお勧めします。
  • 複雑な結合やエイリアスにはtypeを使用することをお勧めします。

ひねりのある質問。

質問: type aliasを使用して定義された型に、別のファイルから新しいフィールドを追加できますか?

回答:

できません。Type aliasは別のファイルから宣言的に拡張することはできず、インターフェースとは異なります。

例:

// main.ts type User = { name: string } // another.ts type User = { age: number } // エラー: Duplicate identifier // interface: // main.ts interface User { name: string } // another.ts interface User { age: number } // OK, User = { name: string, age: number }

このテーマの微妙な点を知らなかったための実際のエラーの例。


物語

大規模なプロジェクトでは、共通のデータ構造を型エイリアスを介して定義しました。別のパッケージから既存の型にフィールドを追加する必要が生じたとき、type aliasは宣言的結合をサポートしていないことが分かり、インターフェースに書き換える必要がありました。そのため遅延が発生しました。


物語

開発者の一人がインターフェースを介して関数を定義し、その後ユニオン型(文字列または関数)を追加しようとしましたが、インターフェースはそれに適さないことが分かり、すべての定義をインターセクション/ユニオンを使った型エイリアスに変更しなければなりませんでした。


物語

インターフェースから型エイリアスに変更した後に拡張の構文を混同し、&を使用する代わりにextendsを使おうとしました。エラーは遅れて現れ、その理由をすぐには理解できませんでした。