TypeScriptのinterfaceとtypeの違いについて

はじめに

業務でTypeScriptを使用する機会がありますが、型定義をする際に前任者と同じようにinterfaceで型定義を行なっていました。typeとの違いを理解せずにinterfaceを使用していたため、今回違いを自分の中で明確にするために記事を書きます。

interface

interfaceは、オブジェクト・クラスの構造を決めるためのものになり、型に名前をつけることができます。

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

const member: Member = {
  name: "太郎",
  age: 30,
};

// string型のnameに数字を入れようとすると、エラー
member.name = 50; // Type 'number' is not assignable to type 'string'.

type

typeはTypeScript独特の構文で型エイリアスと呼ばれ、同じくオブジェクトの型に名前をつけることができます。

type Member = {
  name: string;
  age: number;
};

const member: Member = {
  name: "太郎",
  age: 30,
};

member.name = 50; //Type 'number' is not assignable to type 'string'.

interfaceとtypeの違い

1. 宣言方法

下記コードを比較していただければわかりますが、interfaceは宣言のみでtypeは代入になります。（＝が必要）interface構文はブロック{}で終わる文なのでセミコロンが不要になります。

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

type Member = { // =が必要
  name: string;
  age: number;
}; //セミコロンが必要

2. 使用できる型の種類

union型やタプル型はtypeでないと型定義することができません。

// Union型
type Fruit = "apple" | "remon";

// タプル型
type Member = [number, string];

このような場合は、interfaceを使用することができず、typeを使用する必要があります。

3. interfaceはマージされる

interfaceは、同じ名前の型を定義すると自動的に一つの定義にマージしてくれます。

interface Member {
  name: string;
}

// 同じ名前の型を定義すると、マージされる
interface Member {
  age: number;
}

const member: Member = {
  name: "太郎",
  age: 30
};

typeで同じ名前の型を定義すると、エラーが出ます。

type Member = {
  name: string;
};

type Member = {
  age: number;
};
// Duplicate identifier 'Member'.

4. 継承

interfaceはextendsで継承可能です。

interface Name {
  name: string;
}

interface Member extends Name {
  age: number;
}

const member: Member = {
  name: "太郎",
  age: 30
};

一方、typeは継承を行えませんが交差型（&）で継承と似たようなことができます。

type Name = {
  name: string;
};

type Age = {
  age: number;
};

// intersection型
type Member = Name & Age;

const member: Member = {
  name: "太郎",
  age: 30
};

まとめ

どっちを使うかはプロジェクトによって違うと思いますが、インターフェイスの場合同じ名前で型を定義すると自動的にマージされるのでそこは気をつけたいと思いました。今回interfaceとtypeの違いを明確に整理をすることができました！

参考記事