Geavanceerde foutverwerkingstechnieken in TypeScript

Effectieve foutverwerking is cruciaal voor het bouwen van robuuste TypeScript-toepassingen. Naast eenvoudige try-catch-blokken biedt TypeScript verschillende geavanceerde technieken om fouten op een elegante manier te verwerken en de betrouwbaarheid van de code te garanderen. Dit artikel onderzoekt enkele van deze geavanceerde foutverwerkingsstrategieën.

1. Aangepaste foutklassen

Door aangepaste foutklassen te maken, kunt u verschillende typen fouten nauwkeuriger weergeven. Aangepaste fouten kunnen extra eigenschappen of methoden bevatten, die kunnen helpen bij het identificeren en behandelen van specifieke problemen.

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

In dit voorbeeld breidt CustomError de ingebouwde klasse Error uit en voegt een eigenschap code toe om een ​​foutcode op te geven.

2. Foutverwerking in asynchrone code

Asynchrone code vereist vaak speciale afhandeling voor fouten. Het gebruik van async en await samen met try-catch blokken kan de afhandeling van fouten in asynchrone bewerkingen vereenvoudigen.

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

Dit voorbeeld laat zien hoe fouten van een asynchrone fetch-aanroep worden afgehandeld met behulp van async, await en try-catch.

3. Foutgrenzen in React met TypeScript

Bij het werken met React en TypeScript helpen foutgrenzen om fouten in de componentboom te vangen en een fallback-UI weer te geven. Het implementeren van foutgrenzen met TypeScript zorgt voor typeveiligheid en correcte foutafhandeling.

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;

In dit React-voorbeeld detecteert het component ErrorBoundary fouten in de onderliggende componenten en geeft een fallback-gebruikersinterface weer als er een fout optreedt.

4. Type Guards gebruiken voor fouttypen

Typeguards helpen het type van een fout in TypeScript te beperken. Dit is vooral handig bij het verwerken van fouten met verschillende typen of van verschillende bronnen.

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

De functie isCustomError is een typeguard die helpt bepalen of de gedetecteerde fout een instantie is van CustomError.

5. Gecentraliseerde foutafhandeling

Voor grote applicaties kan centralisatie van foutafhandeling foutbeheer vereenvoudigen en consistentie garanderen. Dit kan worden gedaan met middleware in Express.js of globale foutafhandeling in andere frameworks.

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

Dit voorbeeld demonstreert een gecentraliseerde error handler voor een Express.js-applicatie. Het vangt alle fouten op en reageert met een generiek bericht.

Conclusie

Geavanceerde foutverwerkingstechnieken in TypeScript verbeteren de robuustheid van uw applicaties door meer controle te bieden over foutbeheer. Aangepaste foutklassen, het verwerken van asynchrone fouten, het gebruiken van foutgrenzen in React, type guards en gecentraliseerde foutverwerking zijn essentiële strategieën voor effectief foutbeheer. Het implementeren van deze technieken zal leiden tot beter onderhoudbare en betrouwbaardere code.