'error''は 'unknown' 型です。

はじめに

アプリ開発をしていてtry-catch文のcatch(error)としていると、以下のようなエラーが出ました。

catch (error) {
setError(error.message);    //'error''は 'unknown' 型です。
}

問題

調べてみると、Typescript4.4以降にcatch句のerror変数はunknown型として扱われるようになったことが原因のようです。

これはuseUnknownInCatchVariablesフラグが導入されたことに関係があるようです。strictモードを有効にしている場合、このオプションが自動的に有効になるみたいです。
これが有効になっていると、catch句の変数が従来はany型だったのが、unknow型になってしまうみたいです。

今回のコードは、catchブロック内でerrorを使用する際に、その型が不明確なため、error.messageにアクセスできないというエラーです。

解決方法

以下のようにコードを修正することで今回のエラーは解決できました。

if (error instanceof Error) {
setError(error.message);
} else {
setError('An unknown error occurred');
}

errorがErrorインスタンスであるかどうかチェックをするようにします。
もしErrorインスタンスの場合は、error.messageを使用できます。
else文を置いて、Errorインスタンス出ない場合のエラーメッセージを対応することで、予期しないエラーにも対応ができるようになりました。

おわりに

今までcatch(error)は自動的に書いていることが多かったのですが、今回のエラーによって型安全性向上のためにより厳格なエラーハンドリング方法を知るきっかけになりました。
皆様の参考になれば幸いです！