TypeScript 4.4以降の「Error object inside catch is of type unknown」問題を解決！

2024-06-24

TypeScriptにおけるtry-catchブロックとErrorオブジェクトの型

TypeScriptでtry-catchブロックを使用する際、catchブロックで受け取るErrorオブジェクトの型がunknownになる場合があります。これは、TypeScript 4.4以降の仕様変更によるものであり、従来のany型とは異なる扱いが必要になります。

本記事では、この問題について分かりやすく解説し、具体的な解決策をいくつか紹介します。

問題点

従来のTypeScriptでは、try-catchブロックで受け取るErrorオブジェクトの型はanyでした。これは、あらゆる種類のオブジェクトを受け取れる汎用的な型ですが、型安全性という観点では問題があります。

一方、TypeScript 4.4以降では、Errorオブジェクトの型はunknownに変更されました。unknown型はany型よりも厳格な型であり、ある程度の型情報が推論されるものの、具体的な型までは不明な状態を表します。

この変更により、以下の様な問題が発生します。

Errorオブジェクトのプロパティに安全にアクセスできない
エラーの種類を判別しにくい
エラー処理のコードが冗長になる

解決策

この問題を解決するには、以下の3つの方法があります。

1 型ガードを利用する

typeof演算子やinstanceof演算子などを利用して、Errorオブジェクトの型をより具体的に絞り込むことができます。

try {
  // 処理
} catch (error) {
  if (typeof error === 'string') {
    // 文字列エラーの場合の処理
  } else if (error instanceof Error) {
    // Errorオブジェクトの場合の処理
    console.error(error.message);
  } else {
    // その他のエラーの場合の処理
  }
}

2 型アサーションを利用する

asキーワードを利用して、Errorオブジェクトを特定の型に断言することができます。ただし、この方法は型情報を正しく推論できていない場合に実行時エラーが発生する可能性があるため、注意が必要です。

try {
  // 処理
} catch (error) {
  const typedError = error as Error; // エラーをError型に断言
  console.error(typedError.message);
}

3 カスタムエラー型を利用する

独自のエラー型を定義し、try-catchブロックでその型を捕捉することで、より詳細なエラー処理を行うことができます。

class MyError extends Error {
  constructor(message: string) {
    super(message);
  }
}

try {
  // 処理
} catch (error) {
  if (error instanceof MyError) {
    // MyError型のエラーの場合の処理
    console.error(error.message);
  } else {
    // その他のエラーの場合の処理
  }
}

その他

上記の解決策に加えて、以下の点にも注意する必要があります。

TypeScriptの設定ファイルtsconfig.jsonでstrictオプションを有効にすることで、型チェックをより厳格にすることができます。
ライブラリ製のエラーハンドリングユーティリティを利用することで、より簡潔なコードを書くことができます。

まとめ

TypeScriptにおけるtry-catchブロックとErrorオブジェクトの型問題は、TypeScript 4.4以降の仕様変更によって発生するものです。上記で紹介した解決策を参考に、状況に応じて適切な方法を選択することで、より安全で保守性の高いコードを書くことができます。

TypeScriptにおけるtry-catchブロックとErrorオブジェクトの型：サンプルコード

この章では、記事で説明した概念をより具体的に理解するために、サンプルコードを紹介します。

型ガードを利用した例

以下のコードは、Errorオブジェクトの型をstring型とError型のどちらかに絞り込む例です。

try {
  const value = parseInt('文字列'); // 文字列を数値に変換
} catch (error) {
  if (typeof error === 'string') {
    console.error('文字列変換エラー:', error);
  } else if (error instanceof Error) {
    console.error(error.message);
  } else {
    console.error('予期せぬエラー:', error);
  }
}

class MyError extends Error {
  constructor(message: string) {
    super(message);
  }
}

try {
  throw new MyError('MyErrorが発生しました');
} catch (error) {
  const myError = error as MyError; // エラーをMyError型に断言
  console.error(myError.message);
}

以下のコードは、独自のエラー型MyErrorを定義し、try-catchブロックで捕捉する例です。

class MyError extends Error {
  constructor(message: string) {
    super(message);
  }
}

try {
  // 処理中にMyErrorをスロー
  throw new MyError('MyErrorが発生しました');
} catch (error) {
  if (error instanceof MyError) {
    console.error('MyError:', error.message);
  } else {
    console.error('その他のエラー:', error);
  }
}

補足

上記のコードはあくまで例であり、実際の用途に合わせて適宜修正する必要があります。
より詳細なエラー処理を行う場合は、ログ出力だけでなく、適切なアクションを実行するようにしてください。

TypeScriptにおけるtry-catchブロックとErrorオブジェクトの型：その他の方策

型パラメーターを利用する

汎用的なtry-catchブロックを作成したい場合は、型パラメーターを利用することで、受け取るエラーオブジェクトの型を柔軟に指定することができます。

function tryCatch<T extends Error>(action: () => void, onError: (error: T) => void) {
  try {
    action();
  } catch (error) {
    if (error instanceof T) {
      onError(error);
    } else {
      // その他のエラー処理
    }
  }
}

const divide = (x: number, y: number): number => {
  if (y === 0) {
    throw new Error('0で割れません');
  }
  return x / y;
};

tryCatch(
  () => divide(10, 0),
  (error) => {
    console.error(error.message); // '0で割れません'が出力される
  }
);

Promise/asyncを利用する

非同期処理においては、Promiseやasync/await構文を利用することで、より簡潔かつエレガントなエラー処理を行うことができます。

const fetchData = async (url: string): Promise<string> => {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTPエラー: ${response.status}`);
  }
  return await response.text();
};

(async () => {
  try {
    const data = await fetchData('https://example.com/data.json');
    console.log(data);
  } catch (error) {
    console.error(error.message);
  }
})();