インターフェース vs 型エイリアス：使い分けと実用例

インターフェースとは？

インターフェースは、オブジェクトの構造を定義するための専用構文です。主に「オブジェクトの形を決めたい」場合に使われます。

interface User {
    name: string;
    age: number;
}

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

拡張が得意

インターフェースは拡張（継承）に優れています。複数のインターフェースを結合したり、後からプロパティを追加したりできます。

interface Person {
    name: string;
}

interface Employee extends Person {
    employeeId: number;
}

// 宣言のマージも可能
interface Config {
    baseUrl: string;
}

interface Config {
    timeout: number;
}

const config: Config = {
    baseUrl: "https://example.com",
    timeout: 3000,
};

型エイリアス（type alias）とは？

型エイリアスは、任意の型に別名をつけるための構文です。オブジェクト型だけでなく、プリミティブ型やユニオン型など、柔軟に対応できます。

type User = {
    name: string;
    age: number;
};

const user: User = {
    name: "Hanako",
    age: 25,
};

ユニオン型やタプル型に便利

型エイリアスはユニオン型やタプル型に向いています。

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

type Point = [number, number];

条件付き型などの高等型も扱える

type Nullable<T> = T | null;

const name: Nullable<string> = null;

使い分けの目安とベストプラクティス

インターフェースを使う場面

• オブジェクトの構造を定義したいとき
• クラスとの連携があるとき
• 拡張性（extends, implements）を重視したいとき

interface Animal {
    name: string;
}

class Dog implements Animal {
    name = "Pochi";
}

型エイリアスを使う場面

• プリミティブ型やユニオン型、タプル型などを使いたいとき
• ジェネリクスや条件付き型を使いたいとき
• 関数型を定義したいとき

type Add = (a: number, b: number) => number;

const add: Add = (x, y) => x + y;

両方で迷ったら

基本的にはインターフェースを優先し、「インターフェースでは表現しづらい型（ユニオン型など）」の場合に型エイリアスを選ぶのが良いでしょう。

実務での使い分け例

フロントエンド開発（React）

// Props の型定義にインターフェース
interface ButtonProps {
    label: string;
    onClick: () => void;
}

const Button = ({ label, onClick }: ButtonProps) => (
    <button onClick={onClick}>{label}</button>
);

// 状態管理などでユニオン型を使う場合は type
type Status = "idle" | "loading" | "success" | "error";

APIレスポンスの型定義

type ApiResponse<T> = {
    status: number;
    data: T;
};

まとめ：型の意図に応じて選択しよう

TypeScriptにおける「interface」と「type」は、どちらも型定義に使えますが、それぞれ得意な場面が異なります。インターフェースは「構造の定義」に強く、型エイリアスは「柔軟な型表現」に強い。目的に応じて選択すれば、より読みやすく、保守性の高いコードが書けるようになります。