初級

未定義プロパティを書いたエラーの原因と直し方

interfaceに定義されていないプロパティを、オブジェクトリテラルに書いてしまったときに出るエラーです。プロパティ名のタイプミスもこの形で検出されます。

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

main.ts(5,40): error TS2353: Object literal may only specify known properties, and 'adress' does not exist in type 'User'.

main.ts

ファイル名

5

行番号

40

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

TS2353

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

Object literal may only specify known properties, and 'adress' does not exist in type 'User'.

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

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

 1  interface User {
 2    name: string;
 3    age: number;
 4  }
 5  const u: User = { name: "Al", age: 30, adress: "Tokyo" };
                                        ^
 6  console.log(u.name);

 1  interface Config {
 2    host: string;
 3  }
 4  const c: Config = { host: "localhost", port: 8080 };
                                      ^
 5  console.log(c.host);

 1  interface Book {
 2    title: string;
 3  }
 4  const b: Book = { title: "TS入門", pages: 200 };
                                  ^
 5  console.log(b.title);

 1  interface Tag {
 2    name: string;
 3  }
 4  const t: Tag = { name: "x", color: "red" };
                                ^
 5  console.log(t.name);

 1  interface Note {
 2    text: string;
 3  }
 4  const n: Note = { text: "hi", pinned: true };
                                  ^
 5  console.log(n.text);

よくある誤解

「余分なプロパティがあっても、使わなければ問題ないはず」という感覚は、オブジェクトリテラルを直接代入する場面では通用しません。TypeScriptはリテラルに対してだけ、余分なプロパティが無いかを厳格にチェックします。

実務での勘所

この検査(超過プロパティチェック)が無ければ、プロパティ名のタイプミスの多くが構造的型付けの構造上、正常なコードとして通ってしまいます。純粋な構造的型付けでは「必要なプロパティが揃っていて型が合っていればよい」と判定するため、必須プロパティをすべて満たしたうえでnameをnmaeと打ち間違えた余分なプロパティを追加しても、本来の構造的型付けのルールだけでは合格してしまいます。TypeScriptはこの種のタイプミスを実務でよく見られる典型的な事故と判断し、オブジェクトリテラルを直接渡す場面に限って例外を設けています。

演習をはじめる

関連するエラー

• 必須プロパティの書き忘れエラーの原因と直し方interfaceで定義した必須プロパティを、オブジェクトリテラルで指定し忘れたときに出るエラーです。
• 変数経由なら余分なプロパティが通る理由オブジェクトリテラルを直接関数に渡すと余分なプロパティはエラーになりますが、いったん変数に代入してから渡すとエラーになりません。
• Property does not exist on type の原因と直し方型に定義されていないプロパティ名でアクセスしようとしたときに出るエラーです。