TypeScript に関する質問は、TypeScript インターフェイスと型 ほど多くの議論を引き起こすものはほとんどありません。多くの記事には、以前のバージョンでは重要であったが現在は古くなっている相違点がリストされています。そこで、主張を繰り返すのではなく、それらをテストしました。

それぞれの違いを検証する 1 つのファイルを作成し、TypeScript 5.6.3 を strict モードで使用してチェックしました。以下に引用するコンパイラ エラーは、その実行によって発生します。動作はバージョン間で異なる可能性があるため、プロジェクトで使用している TypeScript のバージョンを確認してください。この言語を初めて使用する場合は、初心者向けの TypeScript チュートリアルから始めてください。

短い答え

interface はオブジェクトの形状を表し、拡張したり再度開いたりすることができます。 type エイリアスは、オブジェクト、共用体、タプル、関数型など、任意の 型に名前を付けます。どちらも機能する場合、違いは主にスタイルです。

どこが同じなのか

これら 2 つの宣言は同一の形状を記述します。

interface User {
  id: number;
  name: string;
  email?: string;
}

type UserAlias = {
  id: number;
  name: string;
  email?: string;
};

const a: User = { id: 1, name: "Asha" };
const b: UserAlias = a;   // no error

TypeScript が使用するもの構造的型付けつまり、名前ではなく形状を比較します。だからこそ、Userに割り当てることができますUserAlias文句なしで。どちらもオプションのプロパティをサポートしています。readonlyプロパティ、メソッド、インデックス署名。

インターフェイスとタイプを並べて表示

type だけでできること

多くの有用な型はまったくオブジェクト形状ではないため、型エイリアスのみがそれらに名前を付けることができます。

type Status = "pending" | "paid" | "shipped";   // union
type Point = [number, number];                    // tuple
type Handler = (event: string) => void;           // function type
type Keys = keyof User;                           // computed type
type ReadonlyUser = Readonly<User>;               // utility type

コンパイラはリスト外の値を拒否するため、ユニオン型は TypeScript の最も価値のある機能の 1 つです。

let s: Status = "paid";
s = "refunded";

// error TS2322: Type '"refunded"' is not assignable to type 'Status'.

これにより、本番環境に到達する前に、コンパイル時にタイプミスや古い値が検出されます。

宣言のマージ

同じ名前のインターフェイスを 2 回宣言すると、TypeScript はそれらを 1 つにマージします。

interface Settings {
  theme: string;
}
interface Settings {
  language: string;
}

const settings: Settings = { theme: "dark", language: "en" };   // no error

型エイリアスで同じことを試みると、コンパイラは拒否します。

type Config = { theme: string };
type Config = { language: string };

// error TS2300: Duplicate identifier 'Config'.

マージは、ライブラリがその型を拡張できるようにする方法です。たとえば、ライブラリを変更せずに、グローバル Window インターフェイスやフレームワークのリクエスト オブジェクトにカスタム プロパティを追加できます。それは本当に役に立ちます。

逆に、マージは偶然に起こる可能性もあります。プロジェクト内の 2 つのファイルが同じスコープ内で同じ名前のインターフェイスを宣言すると、それらは暗黙的に結合されるため、混乱を招く可能性があります。型エイリアスを使用すると、代わりにその衝突がエラーになります。

延長と交差

どちらも既存の型に基づいて構築できます。

interface Admin extends User {
  permissions: string[];
}

type AdminAlias = UserAlias & { permissions: string[] };

互換性のあるプロパティの場合、結果は同じになります。違いは競合として現れます。インターフェイスがプロパティの型を互換性のないように変更しようとすると、コンパイラはそれをすぐに報告します。

interface Base { id: number }
interface Broken extends Base { id: string }

// error TS2430: Interface 'Broken' incorrectly extends interface 'Base'.
//   Types of property 'id' are incompatible.
//     Type 'string' is not assignable to type 'number'.

交差点は宣言されても文句を言いません。代わりに、競合するプロパティは never、つまりどの値も持つことができない型になります。このエラーは、後で使用しようとしたときにのみ表示されます。

type Mixed = { id: number } & { id: string };
const m: Mixed = { id: 1 };

// error TS2322: Type 'number' is not assignable to type 'never'.

この後のエラーは、実際の間違いとは異なる点を指摘しているため、さらに混乱を招きます。これが、オブジェクト タイプを構築するときに extends を優先する実際的な理由の 1 つです。

クラスと実装

クラスは implements を使用して形状と一致することを約束できます。これはインターフェイスまたはオブジェクト タイプのエイリアスで機能します。

class Account implements User {
  constructor(public id: number, public name: string) {}
}

これはエラーなしでコンパイルされました。 implements はクラスが一致することのみをチェックすることに注意してください。プロパティやコードは追加されません。一致する単一の形状が存在しないため、クラスは共用体型を実装できません。

読み取り専用タイプとユーティリティタイプ

Readonly、Partial、Pick、Omit などのユーティリティ タイプは、インターフェイスとエイリアスの両方で動作します。結果は新しい型であり、通常は型のエイリアスで名前が付けられます。

const r: ReadonlyUser = { id: 3, name: "Dev" };
r.name = "Chitra";

// error TS2540: Cannot assign to 'name' because it is a read-only property.

readonly はコンパイル時のみのチェックであることに注意してください。実行時にはオブジェクトは通常の JavaScript ですが、型をバイパスするコードによって変更することができます。

コンパイラのパフォーマンス

TypeScript チーム独自のパフォーマンス ガイダンスでは、コンパイラがインターフェイスの関係をより効率的にキャッシュできるため、大きな交差では extends を使用するインターフェイスを優先することが提案されています。小規模および中規模のプロジェクトでは、違いに気づくことはほとんどありません。これは、型が深く構成された非常に大規模なコードベースでは重要になる可能性があります。私たちはこれを自分たちで測定したわけではありません。

どれを使用するべきですか?

TypeScript ハンドブックのガイダンスに従って、広く使用されているルールは次のとおりです。

• オブジェクト シェイプ、特にパブリック API、およびクラスが実装するものや他のクラスが拡張するものには interface を使用します。
• 共用体、タプル、関数型、およびマップ型または計算型には type を使用します。

一部のチームはどこでも type を単純に使用しますが、これもうまく機能します。最も重要なのは一貫性であるため、規則を選択し、それをスタイル ガイドに記述し、リンターに強制させます。 typescript-eslint の ESLint の consistent-type-definitions ルールはこれを行うことができます。

よくある間違い

• 終わりのない議論。 オブジェクトにはどちらも問題ないため、一度ルールを決めて次に進みます。
• 偶発的なマージ。 同じスコープ内でインターフェイス名を再利用すると、それらがサイレントに結合されます。
• 競合する交差。 後で混乱を招くエラーを含む never タイプを作成します。
• 実行時に型を信頼します。 これらは消去されるため、外部データを検証します。
• any を使用してエラーを抑制します。 チェックをオフにします。 unknownを優先して絞り込みます。

既存のコードベースでのそれらの切り替え

TypeScript は型を名前ではなく構造で比較するため、単純なオブジェクト形状の場合は、interface を type に変更したり、その逆を変更したりすることは通常安全です。切り替える前に、いくつかの点を確認する必要があります。

• インターフェイスを型エイリアスに変換すると、宣言のマージが削除されるため、同じ名前を持つ 2 番目の宣言は重複識別子エラーになります。
• 型エイリアスのインターフェイスへの変換は、オブジェクト シェイプに対してのみ機能します。共用体、タプル、およびマップされた型は、型のエイリアスのままにしておく必要があります。
• エラー メッセージやエディターのホバーではタイプが異なって表示される場合があり、チームメイトを驚かせる可能性がありますが、動作は変わりません。

1 つの集中的なプル リクエストで変更を加え、コンパイラとテスト スイートを厳密モードで実行し、機能作業との混合を避けて、レビュー担当者が他に何も変更されていないことを確認できるようにします。

まとめ

インターフェイスかタイプかという質問には、冷静な答えがあります。それらはオブジェクトとして重複しており、それぞれにいくつかの固有の機能があり、選択よりも一貫性が重要です。チームが別の方法を希望しない限り、形状にはインターフェイスを使用し、その他すべてにはタイプを使用します。違いを自分で確認するには、上記の例をファイルにコピーし、そのファイルに対して tsc --noEmit --strict を実行してください。

よくある質問

学び続ける