Avanserte feilhåndteringsteknikker i TypeScript

Effektiv feilhåndtering er avgjørende for å bygge robuste TypeScript-applikasjoner. Utover grunnleggende try-catch-blokker, gir TypeScript flere avanserte teknikker for å håndtere feil elegant og sikre kodepålitelighet. Denne artikkelen utforsker noen av disse avanserte feilhåndteringsstrategiene.

1. Egendefinerte feilklasser

Ved å lage egendefinerte feilklasser kan du representere ulike typer feil mer nøyaktig. Tilpassede feil kan inkludere ytterligere egenskaper eller metoder, som kan hjelpe til med å identifisere og håndtere spesifikke problemer.

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 dette eksemplet utvider CustomError den innebygde Error-klassen og legger til en code-egenskap for å spesifisere en feilkode.

2. Feilhåndtering i asynkron kode

Asynkron kode krever ofte spesiell håndtering for feil. Å bruke async og await sammen med try-catch blokker kan forenkle feilhåndtering i asynkrone operasjoner.

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

Dette eksemplet demonstrerer håndteringsfeil fra et asynkront fetch-kall ved bruk av async, await og try-catch.

3. Feilgrenser i React med TypeScript

Når du arbeider med React og TypeScript, hjelper feilgrenser med å fange opp feil i komponenttreet og vise et reservegrensesnitt. Implementering av feilgrenser med TypeScript sikrer typesikkerhet og riktig feilhåndtering.

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 dette React-eksemplet fanger ErrorBoundary-komponenten opp feil i de underordnede komponentene og viser et reservegrensesnitt hvis det oppstår en feil.

4. Bruke typebeskyttelse for feiltyper

Typevakter hjelper til med å begrense typen feil i TypeScript. Dette er spesielt nyttig når du håndterer feil med forskjellige typer eller fra forskjellige kilder.

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-funksjonen er en typebeskyttelse som hjelper til med å avgjøre om den fangede feilen er en forekomst av CustomError.

5. Sentralisert feilhåndtering

For store applikasjoner kan sentralisering av feilhåndtering forenkle feilhåndtering og sikre konsistens. Dette kan gjøres ved å bruke mellomvare i Express.js eller globale feilbehandlere i andre rammeverk.

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

Dette eksemplet viser en sentralisert feilbehandler for en Express.js-applikasjon. Den fanger opp alle feil og svarer med en generisk melding.

Konklusjon

Avanserte feilhåndteringsteknikker i TypeScript forbedrer robustheten til applikasjonene dine ved å gi mer kontroll over feilhåndtering. Tilpassede feilklasser, håndtering av asynkrone feil, bruk av feilgrenser i React, typevakter og sentralisert feilhåndtering er essensielle strategier for effektiv feilhåndtering. Implementering av disse teknikkene vil føre til mer vedlikeholdbar og pålitelig kode.