TypeScriptにおける interface の拡張は、オブジェクトの型定義を再利用し、メンテナンス性の高いコードを実現するための非常に強力な仕組みです。
2026年現在のモダンなフロントエンド開発やバックエンド開発において、型定義の柔軟性と堅牢性を両立させることは、プロジェクトの成否を分ける重要な要素となっています。
本記事では、extends キーワードを用いたインターフェースの拡張について、基礎から実践的な設計手法まで詳しく掘り下げていきます。
型安全なアプリケーションを構築するための最適な設計パターンを、具体的なコード例とともに学んでいきましょう。
interface拡張（extends）の基本概念
TypeScriptの interface における extends とは、既存のインターフェースが持つ定義を継承し、新しいプロパティを追加して新しい型を作成する機能を指します。
オブジェクト指向プログラミングにおけるクラスの継承に似ていますが、TypeScriptのインターフェース拡張はより軽量で、複数の型を組み合わせることに特化しています。
基本的な構文は、interface 新しい名前 extends 既存の名前 という形式で記述します。
まずは、最もシンプルな拡張の例を確認してみましょう。
// 基本となるユーザー情報のインターフェース
interface User {
id: number;
name: string;
email: string;
}
// Userを拡張して管理者権限を追加したインターフェース
interface AdminUser extends User {
role: 'admin' | 'superadmin';
permissions: string[];
}
const admin: AdminUser = {
id: 1,
name: "田中太郎",
email: "tanaka@example.com",
role: "admin",
permissions: ["manage_users", "edit_content"]
};このコードでは、AdminUser は User の持つプロパティをすべて引き継ぎつつ、独自の role と permissions を追加しています。
このように共通部分を定義しておくことで、コードの重複を避け、データの構造に一貫性を持たせることができます。
複数のインターフェースを同時に拡張する
TypeScriptでは、単一のインターフェースだけでなく、複数のインターフェースを一度に拡張することが可能です。
これは「多重継承」に相当する機能であり、異なる役割（トレイト）を組み合わせて新しい型を合成する際に非常に便利です。
コンマ区切りで継承元を指定することで、複数の定義をマージできます。
interface Person {
name: string;
}
interface Contact {
email: string;
phoneNumber: string;
}
// PersonとContactの両方を拡張
interface Employee extends Person, Contact {
employeeId: string;
department: string;
}
const newEmployee: Employee = {
name: "佐藤美咲",
email: "sato@example.co.jp",
phoneNumber: "03-1234-5678",
employeeId: "EMP001",
department: "開発部"
};このように、機能や情報のカテゴリーごとにインターフェースを分割し、必要に応じて組み合わせる手法は、大規模な型定義において非常に有効です。
単一の巨大なインターフェースを作るのではなく、小さく再利用可能なインターフェースを定義することが推奨されます。
interface拡張と交差型（Intersection Types）の違い
TypeScriptには、インターフェースの拡張に似た機能として、型別名（Type Alias）を用いた交差型 & が存在します。
一見するとどちらも同じ結果をもたらすように見えますが、内部的な動作やエラーメッセージの分かりやすさには明確な違いがあります。
| 特徴 | interface extends | Type Alias (&) |
|---|---|---|
| 構文 | interface A extends B {} | type A = B & {} |
| コンパイル速度 | 高速（キャッシュされやすい） | 比較的低速 |
| 同名定義の結合 | 可能（宣言のマージ） | 不可能（エラーになる） |
| 型の競合チェック | 拡張時に厳格にチェック | 使用時に初めてチェック |
パフォーマンスの観点からは、可能な限り interface の extends を使用することが推奨されます。
TypeScriptのコンパイラは、インターフェースの階層構造を効率的にキャッシュするように最適化されているため、大規模なプロジェクトほどその差が顕著になります。
また、extends を使用した場合、親インターフェースと子インターフェースでプロパティの型が競合していると、定義した時点でエラーを報告してくれます。
interface Base {
id: string;
}
// コンパイルエラー：Baseのidと型が矛盾しているため
interface Specific extends Base {
id: number;
}Interface 'Specific' incorrectly extends interface 'Base'.
Types of property 'id' are incompatible.
Type 'number' is not assignable to type 'string'.このように、定義時点でエラーに気づける点は extends を利用する大きなメリットの一つです。
プロパティのオーバーライドと型制約
インターフェースの拡張を行う際、既存のプロパティの型をより具体的なものに絞り込む「オーバーライド」が必要になることがあります。
TypeScriptでは、元の型と互換性がある場合に限り、プロパティの型を再定義できます。
例えば、広範な string 型を、特定の文字列リテラル型に絞り込むといった操作がこれに該当します。
interface ApiResponse {
status: string;
data: any;
}
// statusプロパティを特定の文字列リテラルに絞り込む
interface SuccessResponse extends ApiResponse {
status: "success";
data: {
items: string[];
};
}
const response: SuccessResponse = {
status: "success",
data: {
items: ["apple", "banana"]
}
};ただし、元の型と互換性のない型（例えば string を number に変更するなど）への書き換えは許可されません。
プロパティの型を根本的に変更したい場合は、インターフェースの拡張ではなく、Omit ユーティリティ型を使用して元のプロパティを除外してから結合するといったテクニックが必要になります。
ジェネリクスを活用したインターフェースの拡張
柔軟性の高いインターフェース設計を行う上で、ジェネリクスとの組み合わせは欠かせません。
extends を利用しながら型引数を渡すことで、再利用性を極限まで高めることができます。
interface Resource<T> {
id: number;
attributes: T;
}
interface Product {
name: string;
price: number;
}
// ResourceをProduct型で拡張
interface ProductResource extends Resource<Product> {
inventoryCount: number;
}
const product: ProductResource = {
id: 101,
attributes: {
name: "ワイヤレスマウス",
price: 4500
},
inventoryCount: 50
};このパターンを用いることで、共通のメタデータ構造（id など）を持ちつつ、中身のデータ（attributes）を動的に変更できる堅牢な型システムを構築できます。
APIのレスポンス定義や、複雑な状態管理ライブラリの型定義において、この設計手法は非常に重宝されます。
実践的なインターフェース設計の最適解
実際の開発現場では、どのようにインターフェースを分割し、拡張していくべきでしょうか。
一つの指針は、「データの所有権」と「役割」に注目して分割することです。
例えば、UIコンポーネントのPropsを定義する際、基本となるスタイル属性と、コンポーネント固有の属性を分ける手法がよく取られます。
interface BaseButtonProps {
label: string;
onClick: () => void;
disabled?: boolean;
}
interface IconButtonProps extends BaseButtonProps {
iconName: string;
iconPosition: 'left' | 'right';
}
interface PrimaryButtonProps extends BaseButtonProps {
colorScheme: 'blue' | 'green';
elevation: number;
}このように設計することで、すべてのボタンが共通で持つべき振る舞い（onClick など）を BaseButtonProps で一括管理できます。
もし将来的にすべてのボタンに「トラッキング用のID」が必要になったとしても、BaseButtonProps 一箇所を修正するだけで、拡張されたすべてのインターフェースに反映されます。
また、深い継承階層は避け、2～3階層程度に留めることも重要です。
過度に複雑な継承関係は、型の実体を把握しにくくし、開発効率を下げてしまう懸念があるからです。
インターフェース拡張の注意点とデバッグ
インターフェース拡張を多用すると、時として予期せぬ型エラーに遭遇することがあります。
特に複数のインターフェースから同名のプロパティを継承した場合、それらの型が一致していないとエラーになります。
interface ProviderA {
config: { timeout: number };
}
interface ProviderB {
config: { debug: boolean };
}
// エラー：configの定義が競合している
interface CombinedProvider extends ProviderA, ProviderB {}このような場合、TypeScriptは「どちらの型を優先すべきか」を判断できません。
解決策としては、親インターフェース側で型を共通化するか、拡張先でプロパティを具体的に再定義する必要があります。
VS Codeなどのエディタを活用している場合は、インターフェース名にホバーすることで、現在そのインターフェースがどのようなプロパティを保持しているかを確認できるため、積極的に活用しましょう。
まとめ
TypeScriptの interface における extends は、単なるコードの節約ツールではなく、ドメインモデルを正確に表現するための設計基盤です。
本記事で紹介したように、単一継承や多重継承、そしてジェネリクスとの組み合わせを適切に使い分けることで、柔軟かつ堅牢な型システムを構築することが可能になります。
特に Type Alias との使い分けや、パフォーマンス面でのメリットを理解しておくことは、プロフェッショナルなTypeScriptエンジニアとして重要なスキルです。
まずは、プロジェクト内の重複した型定義を探し、共通部分を interface で切り出すことから始めてみてください。
適切なインターフェース拡張の実践は、長期的なコードの品質を支え、チーム全体の開発体験を劇的に向上させるはずです。