interfaceとtypeの違いについて

概要

TypeScriptの超初心者の私が、チュートリアルで実際に簡単なアプリケーション制作する際に、型定義の方法として大きく2つあることを知りました。（※直書きを除く）
「interface」と、「type」になります。
初心者の私からすると、「何が違うんだ！？」という印象を持ちました。
なので、今回「interface」と「type」の違いについてまとめました。

interface

interfaceは、構造を定義するものになります。

interface Sample {
  name: string;
  age: number;
  isAdult: boolean;
}
const user: Samle{
  name: "taro";
  age: 10;
  isAdult: false;
}

type（型エイリアス）

typeは、型に対して名前をつけるものです。

type Sample　= {
  name: string;
  age: number;
  isAdult: boolean;
}
const user: Samle{
  name: "taro";
  age: 10;
  isAdult: false;
}

interfaceとtypeの違い

違い	interface	type
拡張（上書きできるか）	◯	×
継承	◯	×

①拡張

interfaceでは、拡張することができますがtypeは拡張することはできないです。

interfaceの場合

interfaceでは、拡張することが可能です。

interface Window {
  title: string
}

interface Window {
  ts: TypeScriptAPI
}

const src = 'const a = "Hello World"';
window.ts.transpileModule(src, {});

typeの場合

typeを作成後に、型を追加することはできません。

type Window = {
  title: string
}

type Window = {
  ts: TypeScriptAPI
}

 // Error: Duplicate identifier 'Window'.

②継承

interfaceでは、interfaceやtypeから継承することができます。
一方typeは、継承することができません。

interfaceの場合

interface User{
  name: string;
  age: number;
}
interface Test extends User{
  English: number;
  Math: number;
}
const Student: Test{
  name: taro;
  age: 10;
  English: 50;
  Math: 80;
}

ただtypeも交差型を使用することで、継承に似たことは実現することは可能です。
ただ交差型では、型の矛盾があった場合でもコンパイルエラーにならないので、注意が必要です。

type User = {
  name: string;
  age: number;  //number型で定義
};

type Test =  User & {
  age: string;  //string型で定義
  English: number;
  Math: number;
};

type Test = {
  name: string;
  age: string; //string型になる
  English: number;
  Math: number;
};

③定義できる型

最後に、interfaceとtypeの定義できる方の違いについて説明します。
interfaceは、「構造を定義するもの」なので、オブジェクトとクラスの型だけ定義することができます。
一方typeは、オブジェクトとクラス以外の他の型も宣言することができます。

type ID = number | string;
//union型も定義可能

結論

公式ドキュメントによると、

「TypeScriptは他の種類の宣言が必要かどうかを教えてくれます。ヒューリスティックが必要な場合は、タイプの機能を使用する必要があるまでインターフェイスを使用してください。」だそうです。

For the most part, you can choose based on personal preference, and TypeScript will tell you if it needs something to be the other kind of declaration. If you would like a heuristic, use interface until you need to use features from type.

interfaceの方が使ってほしそうですが、場合を見てinterfaceとtypeを使い分けてください。ということでした。

interface、typeの仕様の違いを理解した上で使い分けをすることが重要だと思いました。

参考記事