TypeScriptでインターフェースを継承（extends）する書き方を徹底解説！初心者でもわかる基本

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

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

TypeScriptのインターフェース（interface）は、オブジェクトの設計図のようなものです。たとえば、「このオブジェクトには名前（string型）があって、年齢（number型）もある」といったルールを定義する仕組みです。

これを使うことで、コードを書いたときに「必ずこのプロパティを持たなければならない」というルールを守らせることができます。つまり、プログラムの安全性や予測しやすさを高める役割を果たします。

2. インターフェースの基本的な使い方

2. インターフェースの基本的な使い方

まずはシンプルなインターフェースを定義してみましょう。たとえば、人を表すPersonというインターフェースを作ります。

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

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

    { name: "太郎", age: 20 }

この例では、Personというインターフェースが「nameは文字列、ageは数値」というルールを決めています。これを守らないとエラーになります。

3. インターフェースを継承（extends）するとは？

3. インターフェースを継承（extends）するとは？

ここからが本題です。extendsを使うと、あるインターフェースを基にして、新しいインターフェースを作れます。先ほどの例でいえば、「基本のPersonに加えて学生専用のプロパティを追加する」といった使い方です。

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

interface Student extends Person {
    studentId: string;
}

const student: Student = {
    name: "花子",
    age: 18,
    studentId: "S12345"
};

    { name: "花子", age: 18, studentId: "S12345" }

StudentはPersonを継承しているので、nameとageのプロパティを必ず持ちつつ、新しくstudentIdも追加しています。

まさに「身分証明書」から「学生証」を作ったイメージですね。

4. 複数のインターフェースを継承する方法

4. 複数のインターフェースを継承する方法

TypeScriptの良いところは、1つだけでなく複数のインターフェースを同時に継承できる点です。例えば、学生であると同時に部活動にも所属している人を表現する場合です。

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

interface ClubMember {
    clubName: string;
}

interface Student extends Person, ClubMember {
    studentId: string;
}

const student: Student = {
    name: "健太",
    age: 17,
    studentId: "S67890",
    clubName: "サッカー部"
};

    { name: "健太", age: 17, studentId: "S67890", clubName: "サッカー部" }

この例では、StudentはPersonとClubMemberの両方を継承しています。つまり、名前や年齢だけでなく、学籍番号やクラブ名も持つことができます。

5. 継承を使うメリット

5. 継承を使うメリット

インターフェースの継承を使うことで、以下のようなメリットがあります。

• コードの再利用性が高まる：共通部分をまとめて使い回せる。
• 保守性が良くなる：修正が必要なときに、基底インターフェースを変更すればOK。
• 読みやすさが増す：役割ごとに整理されるため、他の人が読んでも理解しやすい。

プログラムが大きくなってくると、「似たようなオブジェクトを何度も定義してしまう」ことがあります。そんなときにextendsを使えば、一度定義したルールをベースにして新しいインターフェースを作れるのでとても便利です。

まとめ

まとめ

TypeScriptのインターフェース継承について振り返ると、extendsを使うことで「共通する型」を土台にしながら、新しい性質を追加してより複雑なデータ構造を自然に組み立てられるという点がとても重要だと分かります。特に、プログラムが大きくなるほど、同じような構造を何度も繰り返し書くよりも、一度定義したインターフェースを継承して拡張していくほうがコードの見通しがよくなり、保守性も向上します。継承は“元となる形を受け継ぎながら必要な情報を付け足していく”という考え方そのものなので、現実の世界とも重ねながら直感的に理解できるのも大きなメリットです。 また、TypeScriptでは複数のインターフェースを同時に継承できるため、「個人情報＋所属」「ユーザー情報＋会員ステータス」「基本設定＋追加オプション」などの組み合わせを柔軟に扱えるようになります。これは大規模なアプリケーションになるほど欠かせない構造であり、インターフェースの継承という仕組みが型設計の中心的な役割を担っている理由でもあります。 特に今回の記事では、ひとつの基本インターフェースを起点に、学生証やクラブ活動の情報を付け足す例から、複雑な実データを管理するための組み合わせ方まで幅広く扱いました。これらを踏まえることで、今後の型設計により深い視点をもって取り組めるようになるはずです。最後に、インターフェースの継承を実務でも活用しやすい形にまとめたサンプルプログラムを用意したので、読みながら理解をさらに固めていきましょう。

サンプルプログラム：複数継承を活用したユーザー管理モデル

// 基本情報
interface BaseUser {
    id: number;
    name: string;
}

// 住所情報
interface AddressInfo {
    prefecture: string;
    city: string;
}

// 権限情報
interface PermissionInfo {
    role: "admin" | "member" | "guest";
}

// 複数のインターフェースを継承したユーザー型
interface FullUser extends BaseUser, AddressInfo, PermissionInfo {
    email?: string;
}

// クラスで利用
class UserAccount implements FullUser {
    id: number;
    name: string;
    prefecture: string;
    city: string;
    role: "admin" | "member" | "guest";
    email?: string;

    constructor(
        id: number,
        name: string,
        prefecture: string,
        city: string,
        role: "admin" | "member" | "guest",
        email?: string
    ) {
        this.id = id;
        this.name = name;
        this.prefecture = prefecture;
        this.city = city;
        this.role = role;
        this.email = email;
    }

    showInfo() {
        console.log("ID：" + this.id);
        console.log("名前：" + this.name);
        console.log("住所：" + this.prefecture + this.city);
        console.log("権限：" + this.role);
        if (this.email) {
            console.log("メール：" + this.email);
        }
    }
}

const user1 = new UserAccount(1, "太郎", "東京都", "新宿区", "admin", "taro@example.com");
const user2 = new UserAccount(2, "花子", "大阪府", "北区", "member");

user1.showInfo();
user2.showInfo();

このサンプルでは、BaseUser・AddressInfo・PermissionInfoという三つのインターフェースをまとめて継承したFullUserを定義しています。それぞれが独立した役割を持ちながらも、継承によって一つの統合された型として扱えるため、複雑なユーザー情報を整理して管理しやすくなります。クラスでもそのまま実装して活用でき、現実のアプリケーション開発でもよくある「基本情報＋追加情報」をきれいに分離しながら型安全に扱える点が魅力です。こうした構造は、チーム開発や長期の運用を見据えたコードベースにとって非常に重要であり、インターフェース継承の力を最大限に発揮できます。