TypeScript typeとinterfaceの基本的な使い分け

TypeScriptでは、typeとinterfaceのどちらでもオブジェクトの形を定義できます。

似ている部分が多いため、最初はどちらを使えばよいか迷うことがあります。

今回は基本的な書き方と、分かりやすい使い分けを紹介します。

単純なオブジェクト型では、どちらか一方だけが正解というわけではありません。この記事では、Union型などtypeでなければ表しにくいもの、宣言の結合などinterface固有の挙動を先に確認し、残りはチーム内で一貫した規則を選ぶ考え方を取ります。

typeでオブジェクトを定義する

type User = {
  userId: string;
  name: string;
  age?: number;
};

const user: User = {
  userId: 'u1',
  name: '山田',
};

age?のように?を付けたプロパティは省略できます。

定義にない型の値を入れると、TypeScriptがエラーを表示します。

interfaceでオブジェクトを定義する

同じ形をinterfaceで書くと以下のようになります。

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

このような単純なオブジェクトでは、typeとinterfaceのどちらでも大きな違いはありません。

プロジェクト内で書き方を統一すると、コードを読みやすくできます。

interfaceを継承する

interfaceはextendsで別のinterfaceを継承できます。

interface Person {
  name: string;
}

interface Employee extends Person {
  employeeNumber: string;
}

const employee: Employee = {
  name: '山田',
  employeeNumber: 'E001',
};

Employeeには、自身のemployeeNumberと継承元のnameが必要です。

typeを組み合わせる

typeでは交差型の&を使って型を組み合わせられます。

type Person = {
  name: string;
};

type Employee = Person & {
  employeeNumber: string;
};

上記のEmployeeも、nameとemployeeNumberを持ちます。

Union型にはtypeを使用する

複数の候補から1つを選ぶUnion型は、typeで定義します。

type Status = 'waiting' | 'processing' | 'completed';

const showStatus = (status: Status) => {
  switch (status) {
    case 'waiting':
      return '待機中';
    case 'processing':
      return '処理中';
    case 'completed':
      return '完了';
  }
};

Statusには定義した3つの文字列だけを代入できます。

エラーになる例

const status: Status = 'error';

オブジェクト以外の型やUnion型も定義できることが、typeの分かりやすい特徴です。

同じ名前のinterfaceは結合される

interfaceは同じ名前で複数回宣言すると結合されます。

interface WindowSettings {
  theme: string;
}

interface WindowSettings {
  language: string;
}

const settings: WindowSettings = {
  theme: 'dark',
  language: 'ja',
};

ライブラリの型を拡張する場合には便利ですが、意図せず同じ名前を使った場合にも結合されます。

typeは同じスコープで同じ名前を再定義できません。

迷った場合の決め方

用途	選び方の例
オブジェクトの形	`type`と`interface`のどちらでもよい
文字列の候補	`type`
複数の型から1つを選ぶ	`type`
宣言をあとから結合する	`interface`
クラスが実装する契約	`interface`が分かりやすい

すべてをtypeまたはinterfaceへ統一しなければならないわけではありません。

オブジェクトにはinterface、Union型にはtypeなど、チームで理解しやすいルールを決めます。

初心者のうちは、単純なオブジェクトではどちらも使えることと、Union型にはtypeを使うことを覚えておけば十分です。