オブジェクトに型をつける：interfaceとtypeの違い【TypeScript講座５】

こんにちは！
今回は、TypeScriptでオブジェクトに型をつける方法としてよく使われるinterfaceとtypeについてお話しします。この2つの違いや使い分け方をしっかり理解することで、型安全なコードを書けるようになります！初心者でも理解できるよう、わかりやすく解説していきますね。

interfaceとは？
typeとは？
interfaceとtypeの違い
使い分けの指針
実際のプロジェクトでの例
まとめ

interfaceとは？

interfaceは、オブジェクトの構造を定義するためのキーワードです。TypeScriptを学び始めると、最初に出会う型定義の方法の1つです。

例えば、次のようなオブジェクトを型安全に書きたい場合を考えます。

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

const user: User = {
  name: "Taro",
  age: 25,
};

ここではUserという名前のinterfaceを定義し、それを使ってuserオブジェクトの構造を指定しています。これにより、プロパティの名前や型が正しいかどうかをTypeScriptがチェックしてくれます。

typeとは？

typeも、オブジェクトに型を定義する際によく使われます。typeを使った場合の書き方は次の通りです。

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

const user: User = {
  name: "Hanako",
  age: 30,
};

ここでも、typeを使ってUser型を定義しています。基本的な使い方はinterfaceと同じように見えますね。

interfaceとtypeの違い

では、interfaceとtypeは何が違うのでしょうか？主な違いは以下の通りです。

1. 拡張性

interfaceは、他のinterfaceを拡張できます。

interface Animal {
  name: string;
}

interface Dog extends Animal {
  breed: string;
}

const myDog: Dog = {
  name: "Pochi",
  breed: "Shiba Inu",
};

一方、typeでは、拡張にはユニオン型やインターセクション型を使います。

type Animal = {
  name: string;
};

type Dog = Animal & {
  breed: string;
};

const myDog: Dog = {
  name: "Max",
  breed: "Golden Retriever",
};

どちらも似たように見えますが、interfaceのほうが拡張性に優れています。特に、大規模プロジェクトではinterfaceが推奨されることが多いです。

2. 型の表現力

typeは、interfaceでは表現できない型も定義できます。例えば、ユニオン型を使う場合です。

type Status = "success" | "error" | "loading";

const currentStatus: Status = "success";

このような文字列リテラル型はtypeでのみ定義できます。interfaceはオブジェクトの形状を定義するのに特化しているので、リテラル型や組み合わせ型には向いていません。

3. 再オープン可能性

interfaceは再オープン可能（declaration mergingが可能）です。同じ名前で複数のinterfaceを宣言すると、それらが自動的にマージされます。

interface User {
  name: string;
}

interface User {
  age: number;
}

const user: User = {
  name: "Ken",
  age: 28,
};

一方、typeは再オープンできないため、同じ名前で宣言するとエラーになります。

使い分けの指針

オブジェクトの構造を定義する場合：interfaceを優先。特に、拡張性が必要な場合に有利です。
ユニオン型や特殊な型を定義する場合：typeが適しています。
他のライブラリとの連携が必要な場合：interfaceのほうが馴染みが良いです。

TypeScript公式ドキュメントでも、この2つについて詳しく説明されています。興味がある方は、TypeScript公式ドキュメントを参考にしてください。

実際のプロジェクトでの例

以下は、実際のプロジェクトでinterfaceとtypeを組み合わせて使う例です。

interface Person {
  id: number;
  name: string;
}

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

const employee: Employee = {
  id: 1,
  name: "Yuki",
  role: "Developer",
};

ここでは、interfaceで基本的な構造を定義し、typeでその構造を拡張しています。このように組み合わせて使うことで、コードをわかりやすく、再利用しやすくできます。

まとめ

今回は、TypeScriptでオブジェクトに型をつける方法としてinterfaceとtypeを取り上げました。それぞれの特徴や違いを押さえることで、用途に応じて適切な方法を選べるようになります。特に、プロジェクトが大きくなるにつれて、この知識が役立つはずです！

実際にコードを書いて試しながら学ぶことで、TypeScriptの型システムにもっと親しめるようになりますよ。ぜひトライしてみてください！