前回の記事では Union型とLiteral型 を解説しました。

Union型を使うことで

複数の型

を扱える柔軟な型設計ができるようになります。

今回の記事では

TypeScriptの型定義方法

である

interface
type

について解説します。

TypeScriptではこの2つの方法で型を定義できます。

この記事では次の内容を解説します。

interfaceとは
typeとは
interfaceとtypeの違い
実務での使い分け

TypeScriptを使う上で非常に重要な内容なので、しっかり理解しておきましょう。

interfaceとは

interfaceは

オブジェクトの構造

を定義するための仕組みです。

例

interface User {
  name: string
  age: number
}

この型を使うと

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

のように書くことができます。

もし次のようなコードを書くと

const user: User = {
  name: "Taro"
}

TypeScriptはエラーを出します。

理由

age が存在しない

からです。

interfaceの特徴

interfaceには次の特徴があります。

オブジェクト定義に向いている

データ構造を定義する場合に使います。

例

interface Product {
  id: number
  name: string
  price: number
}

拡張できる

interfaceは 拡張（extends） ができます。

interface User {
  name: string
}

interface Admin extends User {
  role: string
}

この場合

Admin = User + role

になります。

typeとは

typeは

型の別名

を作る仕組みです。

例

type User = {
  name: string
  age: number
}

この書き方はinterfaceとほとんど同じです。

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

typeの特徴

typeはinterfaceより柔軟です。

例えばUnion型も定義できます。

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

また、複雑な型も作れます。

type ID = string | number

interfaceとtypeの違い

初心者が最も迷うポイントです。

違いをまとめると次の通りです。

特徴	interface	type
オブジェクト型	○	○
Union型	×	○
拡張	○	○
柔軟性	低い	高い

実務での使い分け

実務では次のように使うことが多いです。

interface

オブジェクト構造

例

User
Product
APIレスポンス

type

複雑な型

例

Union型
Literal型
Utility型

Reactでの利用例

Reactではpropsの型定義に使われます。

例

interface Props {
  title: string
}

コンポーネント

function Header(props: Props) {
  return <h1>{props.title}</h1>
}

APIレスポンスの例

APIレスポンスを型定義する例です。

interface User {
  id: number
  name: string
  email: string
}

APIデータ

const users: User[] = []

typeの応用例

typeはUnion型と組み合わせて使えます。

例

type Theme = "light" | "dark"

また

type ID = string | number

のような定義もできます。

どちらを使うべきか

結論

どちらでもOK

です。

ただし多くのプロジェクトでは次のルールが使われます。

一般的なルール

オブジェクト → interface
複雑な型 → type

まとめ

この記事では

interfaceとtypeの違い

を解説しました。

重要なポイント

interfaceはオブジェクト定義
typeは柔軟な型定義
Union型はtype
実務では両方使う

TypeScriptでは型設計が非常に重要です。

interfaceとtypeを適切に使い分けることで、コードの可読性と保守性が向上します。

次回は

TypeScriptのGenerics

を解説します。

GenericsはTypeScriptの中でも

最も強力な機能

の一つです。

ライブラリや再利用コードを書くときに非常に重要になります。

TypeScriptのInterfaceとTypeの違い（型定義の2つの方法） – 9/13