TypeScriptのtypeとinterface、どう使い分ける?

ypeScriptはJavaScriptに型システムを導入することで、開発の柔軟性と安全性を高めます。特にtypeとinterfaceの使い分けは、TypeScriptを効果的に活用する上で重要です。

2024年02月07日
関連記事

TypeScriptのtypeとinterfaceの使い分けは、開発者やプロジェクトによって個性が出ると思います。
「typeだけで十分だ」「interfaceを使うべきだ」などの持論がある方は読み飛ばしてください。

type(型エイリアス)

type により、型エイリアスを宣言することができます。

  • 継承はできない(インターセクション型でそれっぽくは可能)
  • 再宣言はできない

使用例

基本的な型のエイリアス:

type Point = {
  x: number;
  y: number;
};

ユニオン型:

type StringOrNumber = string | number;

インターセクション型:

type User = {
  name: string;
  age: number;
};
type Employee = User & {
  employeeId: number;
};

タプル型:

type RGB = [number, number, number];

interface

interfaceは主にオブジェクトの型を定義するために使用されます。
個人的にはクラスでの定義として確実に使用しています。

ただ「拡張が可能」な分、かっちりと管理していないと、予期せぬバグが起こったりします。

あたり構わず定義させず、「これはinterface用のディレクトリですよ」など、プロジェクトごとに決まりごとを作った方が良さそうです。

  • クラスの実装に適している
  • 再宣言による拡張が可能(自動的に型がマージされる)

使用例

基本的なオブジェクト型の定義:

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

メソッドを含むオブジェクト型:

interface Greeter {
  greeting: string;
  greet(): void;
}

他のインターフェースの拡張:

interface Employee extends User {
  employeeId: number;
}

おわりに

どちらが優れているという結論はないです。
用途によって使い分けましょう。

筆者情報
IT業界経験6年目のフルスタックエンジニア。
フロントエンドを軸として技術を研鑽中でございます。