Avancerade felhanteringstekniker i TypeScript

Effektiv felhantering är avgörande för att bygga robusta TypeScript-applikationer. Utöver grundläggande try-catch-block, tillhandahåller TypeScript flera avancerade tekniker för att hantera fel elegant och säkerställa kodtillförlitlighet. Den här artikeln utforskar några av dessa avancerade felhanteringsstrategier.

1. Anpassade felklasser

Genom att skapa anpassade felklasser kan du representera olika typer av fel mer exakt. Anpassade fel kan inkludera ytterligare egenskaper eller metoder, som kan hjälpa till att identifiera och hantera specifika problem.

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

I det här exemplet utökar CustomError den inbyggda Error-klassen och lägger till en code-egenskap för att ange en felkod.

2. Felhantering i asynkron kod

Asynkron kod kräver ofta speciell hantering för fel. Att använda async och await tillsammans med try-catch block kan förenkla felhantering i asynkrona operationer.

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

Det här exemplet visar hanteringsfel från ett asynkront fetch-anrop med async, await och try-catch.

3. Felgränser i React med TypeScript

När du arbetar med React och TypeScript hjälper felgränser att fånga upp fel i komponentträdet och visa ett reservgränssnitt. Implementering av felgränser med TypeScript säkerställer typsäkerhet och korrekt felhantering.

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;

I det här React-exemplet fångar ErrorBoundary-komponenten fel i sina underordnade komponenter och visar ett reservgränssnitt om ett fel uppstår.

4. Använda typskydd för feltyper

Typskydd hjälper till att begränsa typen av fel i TypeScript. Detta är särskilt användbart vid hantering av fel med olika typer eller från olika källor.

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

Funktionen isCustomError är en typskydd som hjälper till att avgöra om det fångade felet är en instans av CustomError.

5. Centraliserad felhantering

För stora applikationer kan centralisera felhanteringen förenkla felhanteringen och säkerställa konsekvens. Detta kan göras med hjälp av mellanprogram i Express.js eller globala felhanterare i andra ramverk.

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

Det här exemplet visar en centraliserad felhanterare för en Express.js-applikation. Den fångar alla fel och svarar med ett allmänt meddelande.

Slutsats

Avancerade felhanteringstekniker i TypeScript förbättrar robustheten i dina applikationer genom att ge mer kontroll över felhanteringen. Anpassade felklasser, hantering av asynkrona fel, användning av felgränser i React, typskydd och centraliserad felhantering är viktiga strategier för effektiv felhantering. Att implementera dessa tekniker kommer att leda till mer underhållbar och tillförlitlig kod.