TypeScriptのtypeとは、型に名前を付けて、読みやすく再利用できるようにする書き方です。
長いオブジェクト型、複数の候補を持つunion型、関数の引数や戻り値の型を、そのまま毎回書くとコードが読みにくくなります。typeを使うと、それらの型に意味のある名前を付けられます。
typeはJavaScriptの値を作る命令ではありません。TypeScriptの型チェックで使う「型の名前」です。
この記事では、typeの基本構文、union型で便利な理由、interfaceとの違い、実務での使い分けを初心者向けに整理します。
まず結論：typeは型に名前を付けるための書き方
TypeScript公式ドキュメントでは、同じ型を何度も参照するために名前を付けられる仕組みとしてtype aliasが説明されています。まずは「型の別名を作る」と考えると分かりやすいです。
type User = {
id: number;
name: string;
};
function showUser(user: User) {
console.log(user.name);
}この例では、{ id: number; name: string }という型にUserという名前を付けています。以後は、同じ型をUserとして読めます。
typeが必要になる理由
型をその場に直接書くこともできます。しかし、同じ型が複数箇所に出てくると、コードの意味が追いにくくなります。
function send(user: { id: number; name: string; email?: string }) {
// ...
}
function save(user: { id: number; name: string; email?: string }) {
// ...
}このような型は、typeで名前を付けると、何を表すデータなのかが分かりやすくなります。
type User = {
id: number;
name: string;
email?: string;
};
function send(user: User) {
// ...
}
function save(user: User) {
// ...
}typeの価値は、短くすることではなく、型に意味のある名前を付けることです。
typeの読み方を図で見る
次の図では、typeを「型を書く、名前を付ける、何度も使う」という流れで見てください。型の分類名より先に、再利用の流れを理解するのがポイントです。
union型に名前を付けると便利
typeは、オブジェクト型だけでなく、複数の候補を持つunion型にも名前を付けられます。
type Status = "loading" | "success" | "error";
let currentStatus: Status = "loading";このように書くと、Statusには指定した文字列だけを入れられます。画面の状態、APIの結果、処理ステータスなどを表すときに便利です。
typeは実行時の値を作らない
初心者が混同しやすいのは、typeがJavaScriptのオブジェクトや変数を作るわけではない点です。TypeScriptの型は、基本的にコンパイル時のチェックに使われます。
type User = {
id: number;
name: string;
};
const user: User = {
id: 1,
name: "Sato",
};実際に存在する値はuserです。Userは、その値がどんな形であるべきかを確認するための型名です。
interfaceとの違い
typeとinterfaceは、どちらもオブジェクトの形に名前を付けられます。そのため、簡単なオブジェクト型だけを見ると似ています。
| 比較 | type | interface |
|---|---|---|
| オブジェクト型に名前を付ける | できる | できる |
| union型に名前を付ける | 得意 | できない |
| 既存の型を組み合わせる | intersectionなどで表現しやすい | extendsで表現しやすい |
| 同じ名前の再宣言 | 基本的にできない | 宣言マージがある |
TypeScript公式ドキュメントでも、typeとinterfaceは多くの場面で似ており、必要な機能が出てくるまでは個人の好みで選べるという考え方が示されています。
typeを使うとよい場面
type ApiResult =
| { ok: true; data: string[] }
| { ok: false; message: string };このような「成功か失敗かで形が変わるデータ」は、typeで表すと読みやすくなります。
interfaceを使うとよい場面
interfaceは、オブジェクトの形を拡張していく場面でよく使われます。クラスの実装条件や、ライブラリの型定義でもよく見かけます。
interface User {
id: number;
name: string;
}
interface AdminUser extends User {
role: "admin";
}初心者のうちは、union型や文字列候補ならtype、オブジェクトの形を拡張したいならinterfaceと考えると判断しやすいです。
初心者がつまずきやすいポイント
| つまずき | 理解のしかた |
|---|---|
| typeを値だと思う | typeは型チェック用の名前 |
| typeとinterfaceを完全に別物だと思う | オブジェクト型では似ている場面が多い |
| 何でもtypeで巨大化する | 複雑なら小さな型に分ける |
| 型名が抽象的すぎる | User、Status、ApiResultのように意味で名付ける |
type名の付け方
typeは型を短くするためだけに使うものではありません。型名を見たときに、そのデータが何を表すのか分かることが大切です。
たとえば、DataやValueだけでは意味が広すぎます。ユーザー情報ならUser、画面状態ならPageStatus、APIの返却結果ならApiResultのように、役割が分かる名前を付けると読みやすくなります。
type PageStatus = "idle" | "loading" | "success" | "error";
type UserSummary = {
id: number;
displayName: string;
};名前を付けることで、関数の引数や戻り値を見ただけで、コードの意図を追いやすくなります。これは型安全性だけでなく、チームで読むコードの分かりやすさにも効きます。
型を直すときの考え方
実務では、最初に作った型があとから変わることがあります。たとえば、APIの返却項目が増えたり、ステータスの種類が増えたりする場合です。
このとき、同じ型を複数箇所へ直接書いていると、修正漏れが起きやすくなります。typeで名前を付けておけば、変更する場所を集約しやすくなります。
ただし、何でも1つの巨大な型にまとめると、逆に読みにくくなります。画面用、API用、保存用など、役割が違う型は分けて名前を付けるのが現実的です。
チームで読むコードとしてのtype
TypeScriptの型は、自分のためだけでなく、あとから読む人への説明にもなります。関数の引数にUserと書かれていれば、その関数がユーザー情報を受け取ることがすぐ分かります。
逆に、毎回長いオブジェクト型を直接書いていると、同じ意味の型なのか、少し違う型なのかを判断しづらくなります。共有して使う型には名前を付け、画面の中だけで一度しか使わない型は無理に外へ出さない、という線引きが実務では扱いやすいです。
公式情報と関連して読みたい記事
- TypeScript Handbook: Type Aliases
- TypeScript Handbook: Object Types
- TypeScriptのinterfaceとは？
- TypeScriptのunion型とは？
まとめ
TypeScriptのtypeは、型に名前を付けて読みやすく再利用するための書き方です。