TypeScriptのインターフェースと型エイリアスの違いとは？初心者でもわかる型設計の基本

1. インターフェースとは？

1. インターフェースとは？

TypeScriptのインターフェース（interface）は、「こういう形のデータがありますよ」とプログラムに伝えるための仕組みです。たとえば「人」というデータには名前と年齢がある、といった設計図のようなものです。インターフェースはオブジェクトの構造を定義するのが得意です。

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

let user: Person = {
    name: "太郎",
    age: 20
};

    （出力は特にないが、Person型に合うオブジェクトが代入できる）

ここでのinterfaceは、人の名前は文字列（string）、年齢は数値（number）と決めています。このようにインターフェースはデータの形を保証する役割を持っています。

2. 型エイリアスとは？

2. 型エイリアスとは？

型エイリアス（type alias）は、「型に別名をつける」仕組みです。まるでニックネームのように使えます。インターフェースと同じようにオブジェクトの形も定義できますが、それだけでなくユニオン型（「AまたはB」）など複雑な型を表すのにも強いです。

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

let member: User = {
    name: "花子",
    age: 25
};

    （User型に合うオブジェクトが代入できる）

インターフェースとほとんど同じ書き方ですが、typeを使っています。このように「型エイリアス」もデータの設計図を作れるのです。

3. インターフェースと型エイリアスの違い

3. インターフェースと型エイリアスの違い

ここまで見ると「どっちを使ってもいいのでは？」と思うかもしれません。そこで、代表的な違いを整理しましょう。

• 拡張性：インターフェースはあとから追加で広げることができます。一方、型エイリアスは上書きできません。
• 表現力：型エイリアスは「AまたはB」のようなユニオン型や、「タプル型」（要素数を決めた配列）なども表現できます。インターフェースは主にオブジェクト構造に向いています。
• 使い分け：オブジェクトの設計図を定義するならインターフェース、複雑な型をまとめたいなら型エイリアス、と覚えるとわかりやすいです。

4. インターフェースの拡張（継承）

4. インターフェースの拡張（継承）

インターフェースは「継承（けいしょう）」が得意です。継承とは、既にある型をもとにして、新しい型を作ることです。

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

interface Student extends Person {
    grade: number;
}

let student: Student = {
    name: "次郎",
    age: 16,
    grade: 2
};

    （Student型はPersonを含み、さらにgradeを追加できる）

このように「Person」をもとにして「Student」という型を作れるのがインターフェースの便利な点です。

5. 型エイリアスのユニオン型

5. 型エイリアスのユニオン型

一方で、型エイリアスは「複数の型をまとめる」のが得意です。例えば、変数に文字列か数値のどちらかを許すように定義することができます。

type Id = string | number;

let userId1: Id = "abc123";
let userId2: Id = 456;

    （文字列でも数値でもId型として受け入れられる）

このように「ユニオン型（AまたはB）」を表せるのは、型エイリアスの強みです。

6. 初心者が迷わない使い分けのコツ

6. 初心者が迷わない使い分けのコツ

プログラミングを始めたばかりの人が迷わないために、次のように使い分けるとよいでしょう。

• オブジェクトの設計図 → インターフェースを使う
• 複雑な型（ユニオン型やタプル型など） → 型エイリアスを使う

どちらを使っても動く場面が多いので、最初は「人や物の情報をまとめたいならインターフェース」と覚えるとシンプルです。

まとめ

まとめ

TypeScriptのインターフェースと型エイリアスの違いについて振り返ると、それぞれが似ているようでありながら、用途や得意分野が明確に異なるという点がよく理解できます。まず、インターフェースはオブジェクトの構造を定義するための設計図のような役割を持っており、特に「人」「商品」「設定情報」などのように、現実世界にある形をそのままプログラムに落とし込む場面で大きな力を発揮します。また、拡張や継承に強く、既存のインターフェースに項目を追加したり、新しいインターフェースを派生させたりしやすいため、長期的な開発にも柔軟に対応できます。 一方の型エイリアスは、単にオブジェクトの形を表すだけではなく、ユニオン型やタプル型など複雑な型を簡潔に表現できるため、データの種類が複数あり得るケースや、条件によって型が変わるようなケースに向いています。「AまたはB」「特定の形式を持った複数の型の組み合わせ」など、柔軟に設計できる点が魅力です。さらに、型エイリアスは関数型なども表現しやすく、可読性を高めるためにもよく使われます。 しかし、インターフェースと型エイリアスはどちらもTypeScriptで型を管理するための基本的な道具であり、単純に「どちらかが優れている」というものではありません。目的に応じて適切に使い分けることで、コードの見通しがよくなり、型の安全性も高まります。中規模から大規模のプロジェクトになるほど、この使い分けが設計の質に直結します。 以下に、インターフェースと型エイリアスを両方使うサンプルコードを用意しています。どちらの強みも活かしながら、実際の開発でよくある「ユーザーとステータス」を扱う例になっているため、理解がさらに深まるでしょう。

サンプルプログラム：インターフェースと型エイリアスの組み合わせ

// インターフェース：ユーザーの基本情報
interface UserInfo {
    id: number;
    name: string;
    email?: string;
}

// 型エイリアス：ユーザーのステータス
type UserStatus = "active" | "inactive" | "banned";

// クラスでインターフェースを実装し、ステータスを扱う
class UserAccount implements UserInfo {
    id: number;
    name: string;
    email?: string;
    status: UserStatus;

    constructor(id: number, name: string, status: UserStatus, email?: string) {
        this.id = id;
        this.name = name;
        this.status = status;
        this.email = email;
    }

    showProfile() {
        console.log("ID：" + this.id);
        console.log("名前：" + this.name);
        console.log("ステータス：" + this.status);
        if (this.email) {
            console.log("メール：" + this.email);
        }
    }
}

const user1 = new UserAccount(1, "太郎", "active", "taro@example.com");
const user2 = new UserAccount(2, "花子", "inactive");

user1.showProfile();
user2.showProfile();

この例では、インターフェースで「ユーザーの基本構造」を定義し、型エイリアスで「ステータス」という複数パターンを持つ型を定義しています。UserAccountクラスはインターフェースを実装し、型エイリアスを用いてステータスの型チェックを強化しています。このように両方を組み合わせることで、より安全で拡張性のある設計が可能になります。 実際の開発では「データの形」という安定した部分にはインターフェースを、「変わりやすい状態や複数の選択肢がある型」には型エイリアスを使うと、設計の意図が明確になります。どちらを使うか迷ったときは、今回の比較を思い出して目的に合った方法を選ぶと良いでしょう。