Programmingフルスタック開発者

タイプ拡張(extends)はどのように機能し、タイプおよびインターフェースを使用する際の注意点は何ですか?これがプロジェクトの構造にどのように影響しますか?

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

回答

TypeScriptでは、interface extendsを使用して型を拡張(継承)することも、type & type(交差型)を使用することもできます。また、インターフェースは型を拡張でき、その逆も可能です。

インターフェースは、プロパティを継承するためにextendsキーワードを使用します:

interface Animal { name: string; } interface Bird extends Animal { wings: number; }

タイプ&を介して結合できます:

type Animal = { name: string }; type Bird = Animal & { wings: number };

また、インターフェースは別の型を拡張することができます:

type Base = { id: number }; interface Derived extends Base { description: string; }

特徴:

  • インターフェースは宣言のマージをサポートしますが、タイプはサポートしません。
  • 他のエンティティの拡張が予想される場合、インターフェースが推奨されます(例えば、ライブラリ用)。
  • ネストされたextendsは複雑な階層を引き起こし、保守を難しくし、名前の衝突を生じさせる可能性があります。

Trick Question

タイプ(type)はインターフェースを通じて拡張できますか、それともその逆は?ほとんどの人が犯す誤りは何ですか?

多くの人は、インターフェースのみがインターフェースを通じて拡張できると考えていますが、実際にはインターフェースは型を拡張できます:

type Basic = { flag: boolean }; interface Extra extends Basic { name: string; }

ただし、タイプはextendsを使用して他のタイプを拡張することはできず、型の交差(&)を介してのみ拡張できます。

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


物語

ある大規模プロジェクトでは、インターフェースをextendsを介して統合し、同名のプロパティがタイプに一致するべきことを忘れていました。誰かが親インターフェースのプロパティのタイプを変更したとき、子インターフェースではサイレントコンフリクトが発生し、データベースがAPIに準拠しなくなりました。

物語

ライブラリでは、&(交差)を介してプロパティをオーバーラップするtypeエイリアスを作成しましたが、一部のプロパティは互換性がありませんでした。TypeScriptはコンパイル段階でこれを見逃しましたが、実際にはランタイムシステムに未定義のフィールドが現れました。

物語

チームはinterfaceがタイプで拡張できないと考えており、共通機能の拡張のためにすべての構造をtypeからinterfaceに書き直して、多くの時間と労力を費やしていましたが、既存のタイプを非標準的に拡張することができたのです。