Расширенные методы обработки ошибок в 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');

В этом примере демонстрируется обработка ошибок асинхронного вызова fetch с использованием async, await и try-catch.

3. Границы ошибок в React с TypeScript

При работе с React и TypeScript границы ошибок помогают отлавливать ошибки в дереве компонентов и отображать резервный пользовательский интерфейс. Реализация границ ошибок с помощью 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 перехватывает ошибки в своих дочерних компонентах и ​​отображает резервный пользовательский интерфейс в случае возникновения ошибки.

4. Использование Type Guards для типов ошибок

Защита типов помогает сузить тип ошибки в 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, защита типов и централизованная обработка ошибок являются важными стратегиями для эффективного управления ошибками. Внедрение этих методов приведет к более поддерживаемому и надежному коду.