🧩

【TypeScript】interfaceとtypeの違い

に公開
TypeScript
interface
type
tech

はじめに

interfaceとtypeの違いについてまとめていこうと思います。

interfaceとは

interface は主にオブジェクトの構造（プロパティやメソッド）を定義する仕組みです。さらに、呼び出しシグネチャ（関数型）、コンストラクタシグネチャ、インデックスシグネチャ（配列型や連想配列型） も定義できます。

基本的な使い方

interface Person {
  name: string;
  age: number;
  greet(): void;
}
const user1: Person = {
  name: "Alice",
  age: 30,
  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  },
};

user1.greet();

特徴

  • オブジェクトの形を定義するのに適している
  • クラスでのimplementsに使用可能（type でもオブジェクト型なら可能）
  • 継承（extends）が可能(インターフェースや型エイリアスを継承可能。)
// 型エイリアス（type alias）
type Vehicle = {
  wheels: number;
};

// 別のインターフェース
interface Engine {
  horsepower: number;
}

// インターフェースが他のインターフェースと型エイリアスを継承
interface Car extends Engine, Vehicle {
  brand: string;
}

const myCar: Car = {
  wheels: 4,
  horsepower: 200,
  brand: "Toyota",
};

console.log(myCar);
  • 既存のinterfaceを再定義・拡張（Declaration Merging）が可能
interface Person {
  name: string;
}
interface Person {
  age: number;
}
// Personは{name: string, age: number}となる

typeとは

typeは型エイリアス (type alias) と呼ばれ、型に別名を付ける仕組みです。
オブジェクト型だけでなく、プリミティブ型、ユニオン型、タプル型など幅広い型を表現できることが特徴です。

基本的な使い方

type ID = string | number;
type Point = [number, number];

type Person = {
  name: string;
  age: number;
  id: ID;       // ID型を使用
  location: Point;  // Point型を使用
};

const User1: Person = {
  name: "Alice",
  age: 30,
  id: "user12345", // string型のID
  location: [100, 200], // [number, number]型のPoint
};

console.log(User1);

特徴

  • ユニオン型や交差型など複雑な型の表現が可能
  • 再定義（Declaration Merging）はできない(同じ名前で複数定義するとエラーになる)
  • 型のエイリアスとして幅広く使える
  • 条件型やマップ型など型レベルの演算が得意
  • クラスのimplementsに利用可能（ただしオブジェクト型に限る）
  • typeは交差型（&）を使って拡張可能。
// interfaceでの拡張
interface Person {
  name: string;
}
interface Employee extends Person {
  employeeId: number;
}

// typeでの拡張
type PersonType = {
  name: string;
};
type EmployeeType = PersonType & {
  employeeId: number;
};

const e1: Employee = { name: "Alice", employeeId: 1 };
const e2: EmployeeType = { name: "Bob", employeeId: 2 };

interfaceとtypeの違い

項目 interface type
定義対象 主にオブジェクトの構造を定義するが、関数型や配列型も定義できる オブジェクト型・ユニオン型・タプル型など
拡張 extendsで可能 交差型（&）で可能
再定義 可能（Declaration Merging） 不可能
ユニオン型 不可 可能

まとめ

  • interfaceはオブジェクトの形を定義するのに最適で、拡張やマージが容易
  • typeは型の別名として幅広く使え、ユニオン型やタプル型など複雑な型も表現可能

Discussion