טכניקות מתקדמות לטיפול בשגיאות ב-TypeScript

טיפול יעיל בשגיאות הוא חיוני לבניית יישומי TypeScript חזקים. מעבר לבלוקים בסיסיים של תפוס ניסיון, TypeScript מספק מספר טכניקות מתקדמות לטיפול בשגיאות בחן ולהבטיח אמינות קוד. מאמר זה בוחן כמה מהאסטרטגיות המתקדמות לטיפול בשגיאות.

1. שיעורי שגיאה מותאמים אישית

יצירת מחלקות שגיאה מותאמות אישית מאפשרת לך לייצג סוגים שונים של שגיאות בצורה מדויקת יותר. שגיאות מותאמות אישית יכולות לכלול מאפיינים או שיטות נוספים, שיכולים לעזור בזיהוי וטיפול בבעיות ספציפיות.

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

בדוגמה זו, CustomError מרחיב את המחלקה המובנית Error ומוסיף מאפיין code כדי לציין קוד שגיאה.

2. טיפול בשגיאות בקוד אסינכרוני

קוד אסינכרוני דורש לעתים קרובות טיפול מיוחד עבור שגיאות. שימוש ב-async ו-wait יחד עם בלוקים try-catch יכול לפשט את הטיפול בשגיאות בפעולות א-סינכרוניות.

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

דוגמה זו מדגימה שגיאות טיפול משיחת fetch אסינכרונית באמצעות async, wait ו-try-catch.

3. גבולות שגיאה ב-React with TypeScript

כאשר עובדים עם React ו-TypeScript, גבולות השגיאה עוזרים לתפוס שגיאות בעץ הרכיבים ולהציג ממשק משתמש חוזר. הטמעת גבולות שגיאה עם TypeScript מבטיחה בטיחות סוג וטיפול נכון בשגיאות.

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;

בדוגמה זו של React, הרכיב ErrorBoundary תופס שגיאות ברכיבי הצאצא שלו ומציג ממשק משתמש חוזר אם מתרחשת שגיאה.

4. שימוש במגני סוגים עבור סוגי שגיאות

מגני סוגים עוזרים לצמצם את סוג השגיאה ב-TypeScript. זה שימושי במיוחד בעת טיפול בשגיאות עם סוגים שונים או ממקורות שונים.

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 היא משמר סוג שעוזר לקבוע אם השגיאה שנתפסה היא מופע של CustomError.

5. טיפול מרכזי בשגיאות

עבור יישומים גדולים, ריכוז טיפול בשגיאות יכול לפשט את ניהול השגיאות ולהבטיח עקביות. ניתן לעשות זאת באמצעות תוכנת ביניים ב-Express.js או במטפלי שגיאות גלובליים במסגרות אחרות.

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

דוגמה זו מדגימה מטפל שגיאות מרכזי עבור יישום Express.js. הוא תופס את כל השגיאות ומגיב בהודעה כללית.

מַסְקָנָה

טכניקות מתקדמות לטיפול בשגיאות ב-TypeScript משפרות את החוסן של היישומים שלך על ידי מתן שליטה רבה יותר על ניהול השגיאות. מחלקות שגיאה מותאמות אישית, טיפול בשגיאות אסינכרוניות, שימוש בגבולות שגיאה ב-React, שמירה על סוגים וטיפול בשגיאות מרכזי הם אסטרטגיות חיוניות לניהול שגיאות יעיל. יישום טכניקות אלו יוביל לקוד בר תחזוקה ואמין יותר.