【TypeScript】「Property ‘completed’ is missing in type…」の原因と解消方法

TypeScriptを使った開発で、「Property ‘completed’ is missing in type ‘{ title: string; userId: number; }’ but required in type ‘TodoType’.」というエラーに遭遇したことはありませんか？
このエラーは、型定義に関する典型的なミスが原因で発生します。この記事では、このエラーの原因を具体例を挙げながら解説し、解決方法をステップバイステップで紹介します。

・エラーの原因
・エラーの解消方法
・まとめ

・エラーの原因

例えば、以下のような型定義とコードがあるとします。

type TodoType = {
  title: string;
  userId: number;
  completed: boolean; // 必須プロパティ
};

const todo: TodoType = {
  title: "Learn TypeScript",
  userId: 1,
  // completed プロパティが不足している
};

このコードをコンパイルしようとすると、以下のエラーが表示されます。

Property 'completed' is missing in type 
'{ title: string; userId: number; }' but required in type 'TodoType'.

エラーの意味としては以下の通りです。

・TodoType 型は title、userId、completed という3つのプロパティを持つことが期待されています。
・しかし、todo オブジェクトには completed プロパティがありません。
・このため、todo オブジェクトは型 TodoType を満たさず、エラーが発生します。

・エラーの解消方法

① 足りないプロパティを追加する

最も基本的な解決方法は、completed プロパティをオブジェクトに追加することです。以下のように修正します。

const todo: TodoType = {
  title: "Learn TypeScript",
  userId: 1,
  completed: false, // 必須プロパティを追加
};

これで型 TodoType を満たすようになり、エラーは解消されます。

② プロパティをオプショナルにする

場合によっては、completed プロパティが必須でないケースも考えられます。その場合、型定義を以下のように修正し、completed をオプショナルプロパティ（任意のプロパティ）にすることができます。

type TodoType = {
  title: string;
  userId: number;
  completed?: boolean; // オプションに変更
};

この変更により、以下のように completed プロパティがなくてもエラーになりません。

const todo: TodoType = {
  title: "Learn TypeScript",
  userId: 1,
};

③ 型アサーションを使用する

場合によっては、todo オブジェクトが実際には completed プロパティを持つことが確実であるとわかっている場合、型アサーションを使用することもできます。

const todo = {
  title: "Learn TypeScript",
  userId: 1,
} as TodoType;

ただし、この方法は型安全性を損なう可能性があるため、最終手段として使うべきです。

④ デフォルト値を追加する

もし completed が常に必要なプロパティで、初期化時に値を自動で設定したい場合、デフォルト値を設定する方法もあります。以下は関数を使った例です。

function createTodo(
  title: string,
  userId: number,
  completed: boolean = false
): TodoType {
  return { title, userId, completed };
}

const todo = createTodo("Learn TypeScript", 1);