Avancerede fejlhåndteringsteknikker i TypeScript

Effektiv fejlhåndtering er afgørende for at bygge robuste TypeScript-applikationer. Ud over grundlæggende try-catch-blokke giver TypeScript flere avancerede teknikker til at håndtere fejl elegant og sikre kodepålidelighed. Denne artikel udforsker nogle af disse avancerede fejlhåndteringsstrategier.

1. Brugerdefinerede fejlklasser

Oprettelse af brugerdefinerede fejlklasser giver dig mulighed for at repræsentere forskellige typer fejl mere præcist. Tilpassede fejl kan omfatte yderligere egenskaber eller metoder, som kan hjælpe med at identificere og håndtere specifikke 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 eksempel udvider CustomError den indbyggede Error-klasse og tilføjer en code-egenskab for at angive en fejlkode.

2. Fejlhåndtering i asynkron kode

Asynkron kode kræver ofte særlig håndtering af fejl. Brug af async og await sammen med try-catch blokke kan forenkle fejlhåndtering i asynkrone 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');

Dette eksempel viser håndteringsfejl fra et asynkront fetch-opkald ved hjælp af async, await og try-catch.

3. Fejlgrænser i Reager med TypeScript

Når du arbejder med React og TypeScript, hjælper fejlgrænser med at fange fejl i komponenttræet og vise en fallback-brugergrænseflade. Implementering af fejlgrænser med TypeScript sikrer typesikkerhed og korrekt fejlhå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-eksempel fanger ErrorBoundary-komponenten fejl i sine underordnede komponenter og viser en reserve-brugergrænseflade, hvis der opstår en fejl.

4. Brug af typebeskyttelse til fejltyper

Typevagter hjælper med at indsnævre typen af ​​fejl i TypeScript. Dette er især nyttigt ved håndtering af fejl med forskellige typer eller fra forskellige 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);
  }
}

Funktionen isCustomError er en typebeskyttelse, der hjælper med at afgøre, om den fangede fejl er en forekomst af CustomError.

5. Centraliseret fejlhåndtering

For store applikationer kan centralisering af fejlhåndtering forenkle fejlhåndtering og sikre konsistens. Dette kan gøres ved hjælp af middleware i Express.js eller globale fejlbehandlere i andre rammer.

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 eksempel viser en centraliseret fejlbehandler for en Express.js-applikation. Den fanger alle fejl og svarer med en generisk besked.

Konklusion

Avancerede fejlhåndteringsteknikker i TypeScript forbedrer robustheden af ​​dine applikationer ved at give mere kontrol over fejlhåndtering. Brugerdefinerede fejlklasser, håndtering af asynkrone fejl, brug af fejlgrænser i React, typevagter og centraliseret fejlhåndtering er væsentlige strategier for effektiv fejlhåndtering. Implementering af disse teknikker vil føre til mere vedligeholdelsesvenlig og pålidelig kode.