TypeScript | 基礎文法：オブジェクト基礎 – オブジェクト型エラーの読み方

TypeScript TypeScript
スポンサーリンク

「オブジェクト型エラーの読み方」のゴールを決める

TypeScript のエラーメッセージは、最初は「英語の塊」にしか見えないと思います。
でも、よく出るパターンは決まっていて、「どこを見れば“何がズレているか”が分かるか」さえ掴めば、一気に読みやすくなります Qiita。

ここでは、オブジェクト型まわりで特によく出るエラーを例にしながら、
「エラーメッセージを“日本語に翻訳する感覚”」を身につけてもらうことを目標にします。

パターン1: 「Property ‘xxx’ is missing in type …」

どんなときに出るエラーか

代表的な例から。

type User = {
  name: string;
  age: number;
};

const u: User = {
  name: "Taro",
};
TypeScript

ここで出るエラーはだいたいこうです。

Property 'age' is missing in type '{ name: string; }' but required in type 'User'.

日本語にするとどういう意味か

分解して読みます。

  • Property 'age' is missing in type '{ name: string; }'
    → 「{ name: string } という型には age プロパティがありません」
  • but required in type 'User'
    → 「でも User 型では age プロパティが必須です」

つまり、「User 型として必要なプロパティ（age）が、代入しようとしているオブジェクトに足りていない」ということです。

どう直せばいいか

直し方はシンプルで、どちらかです。

// 1. 必須プロパティをちゃんと書く
const u: User = {
  name: "Taro",
  age: 20,
};

// 2. そのプロパティを optional にする
type User = {
  name: string;
  age?: number;
};
TypeScript

ポイントは、「TypeScript は“足りないもの”にはとても厳しい」という感覚を持つことです。
「型が要求しているプロパティが全部あるか？」をまず疑うクセをつけると、このエラーは怖くなくなります。

パターン2: 「Object literal may only specify known properties …」

どんなときに出るエラーか

type User = {
  name: string;
  age: number;
};

const u: User = {
  name: "Taro",
  age: 20,
  gender: "male",
};
TypeScript

ここで出るエラーはこんな感じです。

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

日本語にするとどういう意味か

  • Object literal may only specify known properties
    → 「オブジェクトリテラルには、型が知っているプロパティだけを書いてください」
  • 'gender' does not exist in type 'User'
    → 「User 型には gender というプロパティは存在しません」

つまり、「User に定義されていないプロパティ（gender）が、オブジェクトリテラルに紛れ込んでいる」ということです。

これは「excess property check（余剰プロパティチェック）」と呼ばれる仕組みで、
スペルミスや余計な値を早めに検出するための安全装置です。

どう直せばいいか

  • 本当に必要なプロパティなら、型に追加する
type User = {
  name: string;
  age: number;
  gender: string;
};
TypeScript
  • ただのスペルミスなら、正しい名前に直す
  • 「何でも入る」型にしたいなら、インデックスシグネチャなどを検討する
type User = {
  name: string;
  age: number;
  [key: string]: unknown;
};
TypeScript

「このプロパティ、本当に型にないままでいいのか？」
と一度立ち止まるきっかけにしてあげると、このエラーはむしろありがたい存在になります。

パターン3: 「Type ‘X’ is not assignable to type ‘Y’」

どんなときに出るエラーか

type User = {
  name: string;
  age: number;
};

const u: User = {
  name: "Taro",
  age: "20",
};
TypeScript

ここで出るエラーはだいたいこうです。

Type 'string' is not assignable to type 'number'.

あるいは、オブジェクト全体に対してこう出ることもあります。

Type '{ name: string; age: string; }' is not assignable to type 'User'.
  Types of property 'age' are incompatible.
    Type 'string' is not assignable to type 'number'.

日本語にするとどういう意味か

  • Type 'string' is not assignable to type 'number'.
    → 「string 型の値は、number 型としては扱えません」
  • Types of property 'age' are incompatible.
    → 「age プロパティの型同士が噛み合っていません」

つまり、「型の“形”は合っているけど、中のプロパティの型が違う」ということです。

どう直せばいいか

  • 値の型を、型定義に合わせる
const u: User = {
  name: "Taro",
  age: 20,
};
TypeScript
  • 型定義の方を、実際の値に合わせて変える
type User = {
  name: string;
  age: string;
};
TypeScript

重要なのは、「Type ‘X’ is not assignable to type ‘Y’」が出たら、
“X 側と Y 側のどこが違うのか”をメッセージの中から探すことです。
プロパティ名まで掘り下げて書いてくれていることが多いので、そこを手がかりにします。

パターン4: 「Type ‘X’ is missing the following properties from type ‘Y’: …」

どんなときに出るエラーか

配列と単体オブジェクトを間違えたときなどに、よく出ます iifx.dev。

type Product = {
  code: string;
  description: string;
  type: string;
};

const products: Product[] = [
  { code: "A", description: "A", type: "food" },
];

const p: Product = products;
TypeScript

ここで出るエラーは、こんな感じです。

Type 'Product[]' is missing the following properties from type 'Product': code, description, type

日本語にするとどういう意味か

  • Type 'Product[]'
    → 「今渡されているのは Product の配列です」
  • is missing the following properties from type 'Product': code, description, type
    → 「でも Product 型に必要な code / description / type がありません」

つまり、「配列を単体のオブジェクトとして扱おうとしている（またはその逆）」ということです。

どう直せばいいか

  • 本当に欲しいのが「1件」なら、配列から要素を取り出す
const p: Product = products[0];
TypeScript
  • 型定義の方を配列にする
const p: Product[] = products;
TypeScript

このエラーを見たら、「[] が余計についていないか？ 逆に足りていないか？」をまず疑うと、原因にすぐ辿り着けます。

エラーメッセージを読むときの「見る順番」

1. まず「どの型からどの型へ代入しようとしているか」を見る

Type 'X' is not assignable to type 'Y'
Property 'xxx' is missing in type 'A' but required in type 'B'

この「X → Y」「A → B」の関係が分かると、
「どっちが“期待されている型”で、どっちが“実際の型”か」が見えてきます。

2. 次に「どのプロパティで怒られているか」を見る

Property 'age' is missing ...
Types of property 'age' are incompatible.

ここが「どこを直せばいいか」の核心です。
“プロパティ名”まで書いてくれていることが多いので、必ずそこを探すクセをつけると、迷子になりにくくなります。

3. 最後に「原因のパターン」を当てはめる

  • 足りない → missing
  • 余計 → Object literal may only specify known properties
  • 型が違う → is not assignable to
  • 配列 vs 単体 → is missing the following properties from type …（配列のプロパティが並ぶ）

このあたりは、もう「よく出る日本語訳」として覚えてしまって構いません。

「エラーは敵」から「設計のズレを教えてくれる相棒」へ

オブジェクト型まわりのエラーは、最初は本当にうるさく感じると思います。
でも、よく見ると TypeScript はいつも同じことを言っています。

「その型が約束しているプロパティ、ちゃんと全部ある？」
「余計なもの、紛れ込んでない？」
「そのプロパティ、本当にその型でいい？」

エラーメッセージを読むときは、
「TypeScript が何を守ろうとして、どこで“約束違反”だと言っているのか」を探すつもりで眺めてみてください。

そうすると、英語の塊だったメッセージが、
だんだん「設計レビューをしてくれている相棒のコメント」に見えてきます。

スポンサーリンク
タイトルとURLをコピーしました