公開日

【TypeScript】interface と type の違いと使い分け

TypeScriptで型を定義する際には interface と type の二つのオプションがあります。これらは似ているようでいて、使い方には重要な違いがあります。この記事では、それぞれのキーポイントと違い、および具体的な使用シナリオを詳細に解説します。適切なシチュエーションでそれぞれをどのように選択すべきか理解することができます。

著者
  • avatar
    名前
    Lan oo
    Twitter
    @Lan_o_sir
  • Freelance IT Engineer
目次

1. interfaceの基本

interfaceは、オブジェクトの形状やクラスが実装すべき契約を定義するために使われます。
拡張が可能であり、主にオブジェクト指向のプログラミングアプローチに適しています。
また、他のインターフェースを継承することができ、拡張性に優れています。

interface User {
  name: string;
  age: number;
}

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

2. typeの基本

type は、interface よりも柔軟性が高く、プリミティブ型からユニオン型、タプル型など、あらゆる型のエイリアスを作成することができます。
交差型(&)を用いることで拡張することができます。

type NumberOrUndefined = number | undefined;

type User = {
  name: string;
  age: NumberOrUndefined;
};

type Admin = User & {
  privileges: string[];
};

3. interface と type の違い

主な違いは以下の通りです:

  • 拡張性: interfaceは同じ名前のものを複数定義すると、それらが自動的にマージされます。一方でtypeは同じ名前のものを複数定義するとコンパイルエラーになります。
  • 型の合成: typeはユニオン型やタプル型など、複雑な型の合成に適しています。
  • 宣言のマージ: interfaceは自動的にマージされるため、拡張が容易ですが、typeは一度宣言すると、その型に新しいプロパティを追加することはできません。

4. 使用シナリオに基づいた選択

  • オブジェクト指向設計: クラスやオブジェクトの形状を定義する場合は、interfaceの使用が推奨されます。
  • 複雑な型の組み合わせ: ユニオン型やタプル型など、複雑な型を扱う場合はtypeの使用が適しています。
  • ライブラリの公開: interfaceは外部のコードとの互換性を維持するために便利です。拡張や再利用が容易なため、APIの型定義にはinterfaceが一般的です。

まとめ

typeとinterfaceは、TypeScriptにおける型定義の強力なツールです。
それぞれの特性を理解し、プロジェクトのニーズに応じて適切なツールを選択することが重要です。
拡張性と継承を重視する場合はinterfaceを、型の柔軟性と合成を重視する場合はtypeを選ぶことをお勧めします。
この知識を活用して、より効率的で理解しやすいTypeScriptコードを書くことができます。