上級

同名interfaceのマージで型が矛盾した原因と直し方

同じ名前のinterfaceを複数回宣言すると、TypeScriptはそれらを自動的に1つに合成します（宣言のマージ）。ただし同じプロパティ名を違う型で宣言すると、合成できずにエラーになります。

エラーメッセージの読み方

main.ts(5,3): error TS2717: Subsequent property declarations must have the same type.

main.ts

ファイル名

5

行番号

3

列番号 — この位置でtscが検査に失敗しました

TS2717

エラーコード — 検索するとTypeScriptの解説が見つかります

Subsequent property declarations must have the same type.

内容 — 期待していたもの、または受け付けられなかったもの

このエラーが出る典型パターン

 1  interface Box {
 2    width: number;
 3  }
 4  interface Box {
 5    width: string;
                ^
 6  }
 7  console.log("ok");

 1  interface Item {
 2    price: number;
 3  }
 4  interface Item {
 5    price: boolean;
                ^
 6  }
 7  console.log("ok");

 1  interface User {
 2    active: boolean;
 3  }
 4  interface User {
 5    active: string ;
                 ^
 6  }
 7  console.log("ok");

 1  interface Data {
 2    count: number;
 3  }
 4  interface Data {
 5    count: string;
                ^
 6  }
 7  console.log("ok");

 1  interface Flag {
 2    enabled: boolean;
 3  }
 4  interface Flag {
 5    enabled: number ;
                  ^
 6  }
 7  console.log("ok");

よくある誤解

「同じ名前で2回書いたら、後の宣言で上書きされるはず」という考えは誤りです。TypeScriptのinterfaceは上書きではなく合成（マージ）されるため、矛盾する型を持つプロパティがあるとその場でエラーになります。

実務での勘所

この自動合成は不具合ではなく、TypeScriptが意図的に用意している機能です。自分では手を加えられない外部ライブラリの型(グローバルなWindowインターフェースや、npmパッケージが提供する型など)に、後から独自のプロパティを追加したい場面で使われます。同じ名前でinterfaceを再度宣言するだけで、既存の型定義に新しいプロパティを継ぎ足せます。既存の宣言とプロパティの型が矛盾すると合成できずエラーになるのは、意図しない上書きで元のライブラリの型定義を壊さないための安全装置です。

演習をはじめる

関連するエラー

• Mapped typeも通常と同じ型チェックを受ける理由{ [K in keyof T]?: T[K] }のようなmapped typeで生成した型は、見た目は特殊でも、実体は通常のinterfaceと同じようにプロパティごとの型チェックが行われます。
• インデックスシグネチャと矛盾する型のプロパティを宣言するとエラーになる[key: string]: numberのようなインデックスシグネチャを持つinterfaceでは、個別に宣言する具体的なプロパティも、インデックスシグネチャの型と互換性がなければ宣言できません。