初級

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

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);

よくある誤解

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

まとめ

未定義プロパティを書いたエラーの原因と直し方は初級でつまずきやすい項目です。上の3パターンを実際に手で直すと、エラーメッセージのどこを読めばよいかが掴めます。

演習をはじめる

関連するエラー

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