Articles
TypeScript入門
TypeScriptのエラー処理

TypeScriptのエラー処理

この記事ではTypeScriptのエラー処理について説明します。

YouTube Video

TypeScriptにおけるエラー処理

TypeScriptにおけるエラー処理は、基本的にはJavaScriptと同じくtry...catch構文を使って行います。TypeScriptでは、型推論によってエラーの内容をより明確に管理することが可能です。これにより、エラー処理がより厳密で読みやすいものになります。

try...catch構文

基本的なエラー処理の構文は次のようになります。

 1try {
 2    // Code that may throw an error
 3    throw new Error("Something went wrong!");
 4} catch (error) {
 5    // Catch and handle the error
 6    console.error("Error:", error);
 7} finally {
 8    // Code that runs regardless of whether an error occurred
 9    console.log("Finally block executed.");
10}

型安全なエラー処理

TypeScriptでは、catchブロックの中で捕捉されるエラーはany型として扱われますが、適切な型を指定してエラー処理をより安全に行うことが推奨されます。例えば、次のようにカスタムエラー型を定義して使うことができます。

 1class CustomError extends Error {
 2    constructor(message: string, public errorCode: number) {
 3        super(message);
 4        this.name = "CustomError";
 5    }
 6}
 7
 8try {
 9    throw new CustomError("Invalid operation", 400);
10} catch (error) {
11    if (error instanceof CustomError) {
12        console.error(`Error: ${error.message}, Code: ${error.errorCode}`);
13    } else {
14        console.error("Unknown error occurred");
15    }
16}

この例では、CustomErrorというクラスを作成し、errorCodeなどのカスタムのプロパティを持つエラーを投げています。catchブロックでは、instanceofを使ってエラーの種類を判別し、適切な処理を行います。

非同期エラー処理

TypeScriptでも、非同期関数を使う際のエラーを処理するためにtry...catchを使用します。

 1async function fetchData() {
 2    try {
 3        const response = await fetch("https://api.example.com/data");
 4        if (!response.ok) {
 5            throw new Error(`HTTP error! status: ${response.status}`);
 6        }
 7        const data = await response.json();
 8        console.log(data);
 9    } catch (error) {
10        console.error("Failed to fetch data:", error);
11    }
12}
13
14fetchData();

この例では、fetchを使ってデータを取得していますが、response.okをチェックして、ステータスコードがOKでない場合にエラーを投げています。エラーはcatchでキャッチされ、適切にログが出力されます。

まとめ

TypeScriptでは型を使ってエラーの内容を明確にすることができ、エラー処理がより安全かつ読みやすくなります。エラー処理の際には、どのような型のエラーが発生する可能性があるかを明確にし、それに応じた処理を行うことが大切です。

Error

TypeScriptにおけるErrorクラスは、JavaScriptのErrorクラスを拡張しており、エラーを表現するための基本的なオブジェクトです。Errorクラスを使うことで、エラーメッセージを含むオブジェクトを作成して、エラーハンドリングを行うことができます。

Errorクラスの基本

Errorクラスは以下のように使います。

1const error = new Error("Something went wrong!");
2console.log(error.message); // "Something went wrong!"
3console.log(error.name);    // "Error"

プロパティ

Errorクラスには、次のプロパティがあります。

  • message エラーメッセージを表す文字列です。
  • name エラーの名前です。デフォルトでは"Error"となりますが、カスタムエラークラスを作ることで変更できます。
  • stack デバッグ用のスタックトレース情報です。エラーが発生したときにどのコードが原因かを示す文字列です。

カスタムエラークラス

Errorクラスを拡張して、独自のエラークラスを作成することも可能です。これは特定のエラーハンドリングが必要な場面で役立ちます。例えば、HTTPリクエストのエラーやデータベースのエラーなど、エラーの種類に応じた処理を行いたい場合に有効です。

カスタムエラーの作成例 

 1class CustomError extends Error {
 2    constructor(message: string, public errorCode: number) {
 3        super(message); // Call the constructor of the parent class 'Error'
 4        this.name = "CustomError"; // Set the name of the error
 5    }
 6}
 7
 8const customError = new CustomError("Invalid operation", 400);
 9console.log(customError.message);   // "Invalid operation"
10console.log(customError.name);      // "CustomError"
11console.log(customError.errorCode); // 400
  • このように、CustomErrorクラスを作成してエラーコードなどを追加することで、エラーに関する情報をより豊富に管理することができます。

Errorクラスの継承

TypeScriptではErrorクラスを継承してカスタムエラークラスを作成する際に、いくつかの点に注意が必要です。

  1. super() の呼び出し カスタムエラークラスのコンストラクタでは、必ずsuper()を呼び出して、Errorクラスのコンストラクタを実行する必要があります。これにより、messageやstackプロパティが正しく初期化されます。

  2. プロパティの追加 エラーオブジェクトに追加で情報を持たせたい場合、クラス内で新たにプロパティを定義します。たとえば、上記のCustomErrorではerrorCodeというプロパティを追加しています。

エラーのスローとキャッチ

Errorクラスやカスタムエラークラスを使ってエラーをスローし、それをキャッチすることで、エラーハンドリングが可能です。

 1function riskyOperation() {
 2    throw new Error("Something went wrong during the operation");
 3}
 4
 5try {
 6    riskyOperation();
 7} catch (error) {
 8    if (error instanceof Error) {
 9        console.error(error.message);  // "Something went wrong during the operation"
10        console.error(error.name);     // "Error"
11    }
12}

カスタムエラーの場合も同様にinstanceofを使って特定のエラーを判別し、適切な処理を行います。

 1class CustomError extends Error {
 2    constructor(message: string, public errorCode: number) {
 3        super(message);
 4        this.name = "CustomError";
 5    }
 6}
 7
 8try {
 9    throw new CustomError("Database connection failed", 500);
10} catch (error) {
11    if (error instanceof CustomError) {
12        console.error(`Error: ${error.message}, Code: ${error.errorCode}`);
13    }
14}

まとめ

TypeScriptにおけるErrorクラスは、標準のエラーハンドリングを行うための基本となるクラスです。さらに、Errorクラスを拡張してカスタムエラーを作成することで、エラーの種類や追加情報に応じた柔軟なエラーハンドリングが可能になります。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video

TypeScriptにおけるデコレーター