こんにちは。今日は TypeScript の type と interface の違い、そしてよく一緒に出てくる ユニオン型 についてまとめます。
自分の勉強メモも兼ねて書いているので、これから TypeScript を学ぶ人の参考になれば嬉しいです。
typeとinterfaceの共通点
- どちらも 型を定義するために使える
- オブジェクトの形を表したり、再利用性を高めることができる
一見すると「どっちを使っても同じじゃない？」と思うかもしれませんが、実は特徴が少し違います。
typeの特徴
- ユニオン型やプリミティブ型のエイリアスに使える
&（インターセクション）を使えば型を合成できる- ただし 宣言マージはできない
例：ユニオン型の定義
export type AccountingType = | "収入" | "支出（現金）" | "支出（クレジットカード）";
この場合、AccountingType は 3つの文字列のどれか を意味します。
interfaceの特徴
- 主にオブジェクトの形を表現するのに使う
extendsで他のインターフェースを継承できる- 宣言マージが可能 → 後から同じ名前で再定義すると自動で結合される
例：オブジェクト型の定義
export interface Accounting { id: string; date: string; amount: number; content: string; type: AccountingType; category: IncomeCategory | ExpenseCategory; }
宣言マージの違い
interface の場合
同じ名前で再宣言すると自動で結合されます。
interface Accounting { id: string; amount: number; } // 後から拡張できる！ interface Accounting { memo: string; } const a: Accounting = { id: "1", amount: 1000, memo: "昼ごはん代" };
あとから自由にフィールドを追加できるのが大きな特徴。
type の場合
同じ名前で再宣言はできません。
type Accounting = { id: string; amount: number; }; // 再宣言するとエラー // type Accounting = { memo: string }; // 拡張するなら & を使う type AccountingWithMemo = Accounting & { memo: string }; const b: AccountingWithMemo = { id: "2", amount: 2000, memo: "家賃" };
type は その場で閉じた型を作るイメージです。
ユニオン型とは？
ユニオン型は「どれかひとつ」を表す型です。
| を使います。
let value: string | number; value = "こんにちは"; // OK value = 123; // OK value = true; // エラー
今回の例だと、IncomeCategory | ExpenseCategory がまさにユニオン型です。
「収入カテゴリ」か「支出カテゴリ」のどちらか、という意味になります。
まとめ
type
- ユニオン型やプリミティブ型に強い
- 拡張するときは & を使う
interface
- オブジェクトの型を表すのに便利
- 宣言マージがあるので後から拡張できる
ユニオン型
- 「型の選択肢を列挙」できる便利な仕組み
僕の場合、
- 固定的に使う型 → type
- 将来拡張したい型 → interface
という感じで使い分けています。
TypeScript の型は慣れると本当に強力なので、ぜひいろいろ試してみてください。
