TypeScript の高度なエラー処理テクニック

効果的なエラー処理は、堅牢な TypeScript アプリケーションを構築する上で非常に重要です。基本的な try-catch ブロック以外にも、TypeScript ではエラーを適切に処理し、コードの信頼性を確保するための高度な手法がいくつか用意されています。この記事では、これらの高度なエラー処理戦略のいくつかについて説明します。

1. カスタムエラークラス

カスタムエラークラスを作成すると、さまざまな種類のエラーをより正確に表現できます。カスタムエラーには追加のプロパティやメソッドを含めることができ、特定の問題を識別して処理するのに役立ちます。

class CustomError extends Error {
  constructor(public message: string, public code: number) {
    super(message);
    this.name = 'CustomError';
  }
}

function throwError() {
  throw new CustomError('Something went wrong', 500);
}

try {
  throwError();
} catch (error) {
  if (error instanceof CustomError) {
    console.error(`Error: ${error.message}, Code: ${error.code}`);
  } else {
    console.error('Unexpected error:', error);
  }
}

この例では、CustomError は組み込みの Error クラスを拡張し、エラーコードを指定するための code プロパティを追加します。

2. 非同期コードでのエラー処理

非同期コードでは、多くの場合、エラーに対して特別な処理が必要になります。 async と await を try-catch ブロックとともに使用すると、非同期操作でのエラー処理を簡素化できます。

async function fetchData(url: string): Promise {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new CustomError('Failed to fetch data', response.status);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    if (error instanceof CustomError) {
      console.error(`Error: ${error.message}, Code: ${error.code}`);
    } else {
      console.error('Unexpected error:', error);
    }
  }
}

fetchData('https://api.example.com/data');

この例では、async、await、および try-catch を使用して、非同期 fetch 呼び出しからのエラーを処理する方法を示します。

3. TypeScript を使用した React のエラー境界

React と TypeScript を使用する場合、エラー境界はコンポーネントツリー内のエラーをキャッチし、フォールバック UI を表示するのに役立ちます。TypeScript を使用してエラー境界を実装すると、型の安全性と適切なエラー処理が保証されます。

import React, { Component, ErrorInfo } from 'react';

interface Props {}

interface State {
  hasError: boolean;
}

class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(): State {
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    console.error('Error caught by boundary:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

この React の例では、ErrorBoundary コンポーネントが子コンポーネントのエラーをキャッチし、エラーが発生した場合にフォールバック UI を表示します。

4. エラー型に型ガードを使用する

型ガードは、TypeScript でエラーの種類を絞り込むのに役立ちます。これは、異なる型やさまざまなソースからのエラーを処理する場合に特に便利です。

function isCustomError(error: any): error is CustomError {
  return error instanceof CustomError;
}

try {
  throw new CustomError('Example error', 400);
} catch (error) {
  if (isCustomError(error)) {
    console.error(`CustomError: ${error.message}, Code: ${error.code}`);
  } else {
    console.error('Unknown error:', error);
  }
}

isCustomError 関数は、キャッチされたエラーが CustomError のインスタンスであるかどうかを判断するのに役立つ型ガードです。

5. 集中エラー処理

大規模なアプリケーションの場合、エラー処理を集中化することでエラー管理を簡素化し、一貫性を確保できます。これは、Express.js のミドルウェアまたは他のフレームワークのグローバルエラーハンドラーを使用して実行できます。

import express, { Request, Response, NextFunction } from 'express';

const app = express();

app.use((err: any, req: Request, res: Response, next: NextFunction) => {
  console.error('Centralized Error:', err.message);
  res.status(500).send('Internal Server Error');
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

この例では、Express.js アプリケーションの集中型エラーハンドラーを示します。すべてのエラーをキャッチし、汎用メッセージで応答します。

結論

TypeScript の高度なエラー処理技術は、エラー管理をより細かく制御することでアプリケーションの堅牢性を高めます。カスタムエラークラス、非同期エラーの処理、React でのエラー境界の使用、型ガード、集中型エラー処理は、効果的なエラー管理に不可欠な戦略です。これらの技術を実装すると、保守性と信頼性が向上したコードになります。

typescript エラーカスタム errorboundaries async await trycatch typeguards express react 例外集中化処理