Tehnici avansate de tratare a erorilor în TypeScript

Gestionarea eficientă a erorilor este crucială pentru construirea de aplicații TypeScript robuste. Dincolo de blocurile de bază try-catch, TypeScript oferă mai multe tehnici avansate pentru a gestiona erorile cu grație și pentru a asigura fiabilitatea codului. Acest articol explorează unele dintre aceste strategii avansate de gestionare a erorilor.

1. Clase de eroare personalizate

Crearea unor clase de erori personalizate vă permite să reprezentați mai precis diferite tipuri de erori. Erorile personalizate pot include proprietăți sau metode suplimentare, care pot ajuta la identificarea și gestionarea problemelor specifice.

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);
  }
}

În acest exemplu, CustomError extinde clasa încorporată Error și adaugă o proprietate code pentru a specifica un cod de eroare.

2. Tratarea erorilor în codul asincron

Codul asincron necesită adesea o gestionare specială pentru erori. Folosirea async și wait împreună cu blocurile try-catch poate simplifica gestionarea erorilor în operațiunile asincrone.

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');

Acest exemplu demonstrează gestionarea erorilor de la un apel asincron fetch folosind async, wait și try-catch.

3. Limitele erorilor în React with TypeScript

Când lucrați cu React și TypeScript, limitele de eroare ajută la identificarea erorilor din arborele de componente și la afișarea unei interfețe de utilizare de rezervă. Implementarea limitelor de eroare cu TypeScript asigură siguranța tipului și gestionarea corectă a erorilor.

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;

În acest exemplu React, componenta ErrorBoundary detectează erori în componentele sale secundare și afișează o interfață de utilizare de rezervă dacă apare o eroare.

4. Utilizarea tipurilor de gardă pentru tipurile de eroare

Gărzile de tip ajută la restrângerea tipului de eroare în TypeScript. Acest lucru este util în special atunci când se gestionează erori de diferite tipuri sau din diverse surse.

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);
  }
}

Funcția isCustomError este un tip de gardă care ajută la determinarea dacă eroarea prinsă este o instanță a CustomError.

5. Gestionarea centralizată a erorilor

Pentru aplicațiile mari, centralizarea gestionării erorilor poate simplifica gestionarea erorilor și poate asigura coerența. Acest lucru se poate face folosind middleware în Express.js sau handlere de erori globale în alte cadre.

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');
});

Acest exemplu demonstrează un handler de erori centralizat pentru o aplicație Express.js. Captează toate erorile și răspunde cu un mesaj generic.

Concluzie

Tehnicile avansate de tratare a erorilor din TypeScript îmbunătățesc robustețea aplicațiilor dvs. oferind mai mult control asupra gestionării erorilor. Clasele de eroare personalizate, gestionarea erorilor asincrone, utilizarea limitelor de eroare în React, pază de tip și gestionarea centralizată a erorilor sunt strategii esențiale pentru gestionarea eficientă a erorilor. Implementarea acestor tehnici va duce la un cod mai întreținut și mai fiabil.