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 中使用错误边界、类型保护和集中错误处理是有效错误管理的基本策略。实施这些技术将使代码更易于维护和更可靠。