Cannot invoke an object which is possibly ‘undefined’.

この記事では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’.」のエラーの解決方法は以下の通りです。

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

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

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

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

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

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

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html

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

props.handleOnClick?.();

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

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

まとめ

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

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

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

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

// Typescriptのオプショナルチェーンを使用
props.handleOnClick?.();

typescriptの参考書をまとめておきます。

手を動かしながら学ぶTypeScrip

created by Rinker

¥3,531 (2022/05/15 10:20:51時点 楽天市場調べ-詳細)

• Kindle
• Amazon
• 楽天市場

プログラミングTypeScript スケールするJavaScriptアプリケーション開発 [ Boris Cherny ]

created by Rinker

¥3,740 (2024/04/26 04:33:48時点 楽天市場調べ-詳細)

• Amazon
• 楽天市場