TypeScriptのinterfaceとtypeの違いを解説
TypeScriptを学び始めると必ず出てくる疑問があります。
interface と type
どちらを使えばいいの？どちらも型を定義するための機能ですが、実は用途や特徴に違いがあります。
この記事では
- interfaceとは
- typeとは
- それぞれの違い
- 実務での使い分け
を分かりやすく解説します。
interfaceとは？
interfaceは、オブジェクトの型を定義するための機能です。
例
interface User {
name: string
age: number
}使用例
const user: User = {
name: "Taro",
age: 30
}オブジェクトの構造を定義するのに適しています。
typeとは？
例
type User = {
name: string
age: number
}interfaceと同じように使えます。
const user: User = {
name: "Taro",
age: 30
}このように基本的な使い方はほぼ同じです。
interfaceとtypeの違い
主な違いはこちらです。
| 機能 | interface | type |
|---|---|---|
| オブジェクト型 | 〇 | 〇 |
| 型の合成 | △ | 〇 |
| Union型 | × | 〇 |
| Intersection型 | × | 〇 |
| 宣言マージ | 〇 | × |
違い① Union型
typeは Union型 を作れます。
type Status = "success" | "error"しかし
interface Statusでは作れません。
違い② Intersection型
typeでは型を組み合わせることができます。
type User = {
name: string
}
type Admin = {
role: string
}
type AdminUser = User & Admin違い③ 宣言マージ
interfaceには
Declaration Mergingという特徴があります。
同じ名前のinterfaceを後から拡張できます。
interface User {
name: string
}
interface User {
age: number
}結果
{
name: string
age: number
}interfaceの拡張
interfaceは継承ができます。
interface User {
name: string
}
interface Admin extends User {
role: string
}結果
{
name: string
role: string
}typeの拡張
typeでは
type User = {
name: string
}
type Admin = User & {
role: string
}のように書きます。
実務での使い分け
一般的なルールはこちらです。
interfaceを使う場合
- オブジェクト型
- APIレスポンス
- クラス設計
例
interface User {
id: number
name: string
}typeを使う場合
- Union型
- Utility型
- 複雑な型
例
type Status = "loading" | "success" | "error"どちらを使うべき？
実務では次のルールがよく使われます。
基本は interface
複雑な型は typeただしプロジェクトによっては、typeを統一して使う場合もあります。
まとめ
interfaceとtypeの違いは次の通りです。
| 特徴 | interface | type |
|---|---|---|
| オブジェクト型 | 〇 | 〇 |
| Union型 | × | 〇 |
| Intersection型 | × | 〇 |
| 宣言マージ | 〇 | × |
基本ルール
オブジェクト型 → interface
複雑な型 → typeこの使い分けを理解するとTypeScriptのコードがかなり整理されます。
次回は、TypeScriptでanyを使うなと言われる理由