1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

typeとinterfaceの違いについて

1
Last updated at Posted at 2026-04-18

TypeScriptで型の定義で使うtypeとinterfaceがありますが、違いは何でしょうか?
本議事でtypeとinterfaceについて言及します。

結論から言うと、type と interface の違いは「できることの範囲」と「拡張性(継承)」が中心です。
ただし TypeScript 4.x 以降は機能がかなり近づいており、どちらでも書けるが、用途で使い分けるのが実務的です。

一言まとめ

  • interface:オブジェクトの形を定義するための“公式な”仕組み。拡張が得意
  • type:型に名前をつける“別名”。ユニオン型など柔軟な表現が得意

機能の違い(表で理解)

image.png

1. interface は「拡張(extends)」が強い

interface User {
  name: string;
}

interface User {
  age: number;
}

const u: User = { name: "Han", age: 30 };

→ 同じ名前で後から追加できる(再オープン)
→ ライブラリの型拡張に便利(Express の Request など)

2. type は「柔軟な型表現」が強い

ユニオン型

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

タプル型

type Point = [number, number];

条件型

type IsString<T> = T extends string ? true : false;

→ interface では表現できない型を作れる

3. 継承の違い

interface の継承(自然で強力)

interface A { x: number; }
interface B extends A { y: number; }

type の継承(交差型で実現)

type A = { x: number };
type B = A & { y: number };

→ どちらも可能だが、interface の方が読みやすい

4. 実務での使い分け(最重要)

interface を使う場面

  • オブジェクトの形を定義したい
  • クラスの型を定義したい
  • 拡張(extends)を多用する
  • ライブラリの型を上書き・追加したい(再オープン)

type を使う場面

  • ユニオン型を使う
  • タプル型を使う
  • 条件型・mapped types など高度な型を使う
  • 柔軟な型表現が必要

⭐ 結論(実務的な最適解)

  • オブジェクトの型 → interface
  • 柔軟な型表現 → type
  • 迷ったら interface(拡張しやすい)
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?