上級

同名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");

よくある誤解

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

まとめ

同名interfaceのマージで型が矛盾した原因と直し方は上級でつまずきやすい項目です。上の3パターンを実際に手で直すと、エラーメッセージのどこを読めばよいかが掴めます。

演習をはじめる

関連するエラー

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