Cannot invoke an object which is possibly ‘undefined’.

React
language

この記事ではtypescriptで「Cannot invoke an object which is possibly ‘undefined’.」というエラーが出たときの解決方法をご紹介します。

このエラーが出る型定義は以下の通りです。

export type ButtonProps = {
	...
	handleOnClick?: () => void;
};

上記のように定義した場合、handleOnClickは関数または未定義となります。

(property) handleOnClick?: () => void) | undefined

そして、以下のように普通に呼び出すとtypescriptのエラーがでます。

props.handleOnClick();
// ↑Cannot invoke an object which is possibly 'undefined'.

エラーの原因

Cannot invoke an object which is possibly ‘undefined’.」のエラーを直訳すると「場合によっては「未定義」のオブジェクトを呼び出すことはできません。」です。

つまり、「handleOnClickが渡されてないかもしれないのに、handleOnClickが必ず渡されたかの扱うことはできないよ」ということです。

if文などを用いて条件分岐をする必要があります。
このエラーの解決方法を次でご紹介します。

エラーの解決方法

この記事でご紹介する「Cannot invoke an object which is possibly ‘undefined’.」のエラーの解決方法は以下の通りです。

  • 条件分岐を使用
  • Typescriptのオプショナルチェーンを使用

エラー解決方法1:条件分岐

エラーの内容がhandleOnClickが渡されてないかもしれないのに、handleOnClickが必ず渡されたかの扱うことはできないよ」とのことなので、単純に条件分岐をしてしまえば解決します。

if (props.handleOnClick) props.handleOnClick();

エラー解決方法2:Typescriptのオプショナルチェーンを使用

2つ目の解決方法はオプショナルチェーンを使用を使用する方法です。

オプショナルチェーンはTypescript 3.7以降で使用できます。

Documentation - TypeScript 3.7
TypeScript 3.7 Release Notes

Typescriptのオプショナルチェーンを使用したコードは以下の通りです。

props.handleOnClick?.();

上記のコードは以下のコードと等価です。非常にシンプルに書くことができます。

props.handleOnClick === null || props.handleOnClick === undefined ? undefined : props.handleOnClick();

まとめ

Cannot invoke an object which is possibly ‘undefined’.」のエラーはhandleOnClickが渡されてないかもしれないのに、handleOnClickが必ず渡されたかの扱うことはできないよ」ということです。

この記事ではこのエラーの解決方法を以下の通り2通りご紹介しました。

  • 条件分岐を使用
  • Typescriptのオプショナルチェーンを使用

コードは以下の通りです。

// 条件分岐を使用
if (props.handleOnClick) props.handleOnClick();

// Typescriptのオプショナルチェーンを使用
props.handleOnClick?.();
タイトルとURLをコピーしました