【TypeScript】5分でわかるinterfaceとtypeの3つの主な違い

こんにちは！

interfaceとtypeの違いってよくわからない…

そんな悩みを抱えていませんか？

interfaceは主にオブジェクトの構造を定義するために使われ、typeはより柔軟に様々な型を定義するために使われます。
interfaceは後から拡張が可能で、オブジェクト指向的な設計に向いています。
一方、typeは一度定義すると変更できませんが、ユニオン型やインターセクション型など、複雑な型を作るのに適しています。

この記事では、interfaceとtypeの違いを、わかりやすく、そして実践的に解説していきます。
コードを書く上で、どちらを選ぶべきなのか、その判断基準もバッチリお伝えします。

この記事でわかること

interfaceとtypeの基本的な違い
それぞれの特徴と使用例
実際のプロジェクトでの使い分け方
よくある間違いと注意点

Contents

interfaceとtypeの基本的な違い
interfaceの特徴と使用例
typeの特徴と使用例
interfaceとtypeの使い分け
その他の違い
まとめ

interfaceとtypeの基本的な違い

TypeScriptを使う上で、interfaceとtypeは避けて通れない重要な概念です。
でも、一見すると似ているこの2つ、いったいどう違うのでしょうか？

まずは、定義の仕方から見ていきましょう。
interfaceは、オブジェクトの構造を定義するのに使います。
一方、typeは、型に名前をつけるためのエイリアス（別名）として使われることが多いんです。

具体的には、こんな感じです。


// interfaceの定義
interface UserInterface {
  name: string;
  age: number;
}

// typeの定義
type UserType = {
  name: string;
  age: number;
};

見た目はそっくりですが、使用目的が少し違います。
interfaceは主にオブジェクト指向プログラミングの考え方に基づいて使われます。
クラスが実装すべき構造を定義したり、オブジェクトの形を決めたりするのに適しているんです。

対してtypeは、もっと柔軟な使い方ができます。
単純なオブジェクトの形だけでなく、プリミティブ型、ユニオン型、タプル型など、様々な型を定義できるんですよ。

拡張性という点でも、両者には違いがあります。
interfaceは後から新しいプロパティを追加できる「宣言のマージ」という機能があります。
一方、typeは一度定義すると変更できません。

例えば、こんな感じです。


// interfaceの拡張
interface UserInterface {
  name: string;
}
interface UserInterface {
  age: number;
}
// nameとageの両方を持つUserができる

// typeの場合
type UserType = {
  name: string;
}
type UserType = {
  age: number;
}
// 同じ名前でtypeを再定義するとエラーになる

この違いは、大規模なプロジェクトや、ライブラリの開発時に重要になってきます。
拡張性が必要な場合はinterface、厳密な型定義が必要な場合はtypeを選ぶ、といった具合です。

interfaceの特徴と使用例

interfaceは、TypeScriptの中でも特に重要な機能の一つです。
オブジェクトの形を定義するのに使われますが、それだけではありません。
クラスの実装や、継承、拡張など、様々な場面で活躍します。

まずは、基本的なオブジェクトの型定義から見ていきましょう。


interface Person {
  name: string;
  age: number;
  greet(): void;
}

const john: Person = {
  name: "John",
  age: 30,
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

このように、interfaceを使うと、オブジェクトの構造をはっきりと定義できます。
プロパティの型だけでなく、メソッドの型も指定できるんですよ。

interfaceのもう一つの大きな特徴は、クラスの実装に使えることです。
こんな感じです。


interface Drawable {
  draw(): void;
}

class Circle implements Drawable {
  draw() {
    console.log("Drawing a circle");
  }
}

このようにinterfaceを使うと、クラスが必ず実装すべきメソッドを定義できます。
これは、大規模なプロジェクトでコードの一貫性を保つのに役立ちます。

さらに、interfaceは継承と拡張が可能です。
これにより、複雑な型を段階的に構築できるんです。


interface Animal {
  name: string;
}

interface Pet extends Animal {
  owner: string;
}

const dog: Pet = {
  name: "Buddy",
  owner: "Alice"
};

この例では、PetインターフェースがAnimalインターフェースを継承しています。
PetはAnimalのプロパティを全て持ちつつ、新しいプロパティを追加しているんですね。

interfaceのこういった特徴は、特に大規模なアプリケーションの開発で真価を発揮します。
コードの構造を明確に定義し、型の安全性を高めることができるんです。

typeの特徴と使用例

typeは、interfaceと比べてより柔軟な型定義が可能です。
単なるオブジェクトの形だけでなく、様々な型を定義できるんです。
それでは、具体的な使用例を見ていきましょう。

まず、プリミティブ型のエイリアスとしての使用例です。


type UserId = string;
type Age = number;

function getUserInfo(id: UserId, age: Age) {
  console.log(`User ID: ${id}, Age: ${age}`);
}

getUserInfo("abc123", 25);

このように、基本的な型に別名をつけることで、コードの意図がより明確になります。
UserIdやAgeという型を見るだけで、その変数が何を表しているのかがすぐにわかりますね。

次に、typeの強力な機能の一つ、ユニオン型とインターセクション型の定義を見てみましょう。


type Result = "success" | "failure";

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

type Point3D = Point2D & {
  z: number;
};

const point: Point3D = { x: 1, y: 2, z: 3 };

ユニオン型（|で結合）は、複数の型のうちいずれかを表します。
インターセクション型（&で結合）は、複数の型を組み合わせた新しい型を作ります。
これらを使うことで、複雑な型を柔軟に定義できるんです。

typeはタプル型の定義にも便利です。
タプルは、要素の数と型が固定された配列のようなものです。


type Coordinate = [number, number];

function plotPoint(point: Coordinate) {
  console.log(`X: ${point[0]}, Y: ${point[1]}`);
}

plotPoint([10, 20]);

この例では、Coordinate型を2つの数値からなるタプルとして定義しています。
これにより、座標を表す変数の型を簡潔に指定できますね。

typeのこういった特徴は、特に複雑なデータ構造を扱う際に力を発揮します。
APIのレスポンス型や、状態管理ライブラリの状態の型など、複雑な型を定義する場面で重宝しますよ。

interfaceとtypeの使い分け

interfaceとtype、似ているようで異なるこの2つ。
実際のプロジェクトでは、どのように使い分ければいいのでしょうか？
ここでは、オブジェクト指向設計、ライブラリやフレームワークでの使用傾向、そしてパフォーマンスの観点から見ていきましょう。

オブジェクト指向設計

オブジェクトの構造を定義する場合は、基本的にinterfaceを使うのがおすすめです。
特に、以下のような場合はinterfaceが適しています。

クラスが実装すべき契約を定義する場合
オブジェクトの公開APIを定義する場合
拡張可能な型を定義したい場合

例えば、こんな感じです。


interface Animal {
  name: string;
  makeSound(): void;
}

class Dog implements Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  makeSound() {
    console.log("Woof!");
  }
}

ライブラリやフレームワーク

typeは以下のような場合に適しています。

ユニオン型やインターセクション型を定義する場合
関数の型や、タプル型を定義する場合
型の別名（エイリアス）を作りたい場合

次に、ライブラリやフレームワークでの使用傾向を見てみましょう。
ReactやVueなどのフロントエンドフレームワークでは、typeを使用する傾向が強いです。
これは、コンポーネントのpropsやstateの型を定義する際に、ユニオン型やインターセクション型を多用するためです。


type Props = {
  name: string;
  age: number;
} & (
  { type: "student"; grade: number } |
  { type: "worker"; company: string }
);

一方、バックエンドのフレームワークやORMなどでは、interfaceを使用する傾向があります。
これは、データモデルやサービスの契約を定義する際に、interfaceの拡張性が有用だからです。

パフォーマンス

実は、interfaceとtypeのパフォーマンスには、ほとんど違いがありません。
TypeScriptはコンパイル時に型チェックを行い、実行時には型情報が消去されるためです。

ただし、非常に複雑な型を定義する場合、typeの方が若干コンパイル速度が速くなる傾向があります。
しかし、通常のアプリケーション開発では、この差はほとんど無視できるレベルです。

結局のところ、interfaceとtypeの選択は、主にコードの可読性と保守性を考慮して決めるべきでしょう。
プロジェクトの方針や、チームの好みに合わせて一貫性を持って使い分けることが大切です。

その他の違い

interfaceとtypeには、主要な違い以外にもいくつかの特徴的な違いがあります。ここでは、これまで触れていなかった違いについて見ていきましょう。

計算プロパティ（Computed Properties）

typeでは計算プロパティを使用できますが、interfaceでは使用できません。


type Keys = "firstname" | "lastname";

type DuoName = {
  [key in Keys]: string;
};

// OK
const name: DuoName = {
  firstname: "John",
  lastname: "Doe"
};

// interfaceではこのような定義はできません

型の合成（Type Composition）

typeはユニオン型やインターセクション型を直接定義できますが、interfaceではそれができません。


type StringOrNumber = string | number;

type NameAndAge = { name: string } & { age: number };

// interfaceではこのような直接的な合成はできません

プリミティブ型の拡張

typeではプリミティブ型を拡張できますが、interfaceではオブジェクト型しか扱えません。


type MyString = string;
type MyNumber = number & { isEven(): boolean };

// interfaceではプリミティブ型の拡張はできません

型の再帰的定義（Recursive Type Aliases）

typeでは再帰的な型の定義が可能ですが、interfaceでは直接的な再帰定義はできません。


type Tree<T> = {
  value: T;
  left?: Tree<T>;
  right?: Tree<T>;
};

// interfaceでも似たような構造は定義できますが、
// 直接的な再帰参照はできません

インデックスシグネチャ（Index Signatures）の扱い

interfaceとtypeの両方でインデックスシグネチャを使用できますが、typeではより柔軟な定義が可能です。


interface StringDictionary {
  [key: string]: string;
}

type FlexibleDictionary = {
  [key: string | number]: any;
};

型の交差（Intersection）と継承（Extends）

interfaceはextendsキーワードを使って継承しますが、typeは&演算子を使って交差型を作ります。


interface AnimalInterface {
  name: string;
}

interface DogInterface extends AnimalInterface {
  bark(): void;
}

type AnimalType = {
  name: string;
}

type DogType = AnimalType & {
  bark(): void;
}

タプル型の定義

typeではタプル型を直接定義できますが、interfaceでは同様の定義が難しいです。


type Pair = [string, number];

// interfaceでは同等の定義が直接的にはできません

型エイリアスの自己参照

typeでは型エイリアス内で自己参照が可能ですが、interfaceではそれができません。


type LinkedList<T> = T & { next?: LinkedList<T> };

// interfaceでは直接的な自己参照はできません

【付録】さらに学びを深めるためのリソース

intersection型について理解を深めたところで、さらに学習を進めたい方のために、いくつかのリソースを紹介します。
これらのリソースを活用することで、TypeScriptの型システムについてより深い知識を得ることができるでしょう。

オンラインで参照できる公式ドキュメント

TypeScript公式ハンドブック

https://www.typescriptlang.org/docs/
TypeScriptの公式ドキュメントです。
intersection型を含む、すべての型システムの機能について詳細な説明があります。

TypeScript Deep Dive

https://basarat.gitbook.io/typescript/
TypeScriptの深い部分まで掘り下げて解説しているオンラインブックです。
無料で読むことができ、intersection型についても詳しく説明されています。

TypeScriptの学習は終わりがありません。
新しい機能が常に追加され、より良い書き方が発見されています。
継続的に学習を続けることで、より良いTypeScriptプログラマーになれるはずです。

キャリア形成/給与還元
ひとつひとつ真摯に向き合う企業