TypeScript'te Gelişmiş Hata İşleme Teknikleri

Etkili hata işleme, sağlam TypeScript uygulamaları oluşturmak için çok önemlidir. Temel try-catch bloklarının ötesinde, TypeScript hataları zarif bir şekilde işlemek ve kod güvenilirliğini sağlamak için çeşitli gelişmiş teknikler sunar. Bu makale bu gelişmiş hata işleme stratejilerinden bazılarını inceler.

1. Özel Hata Sınıfları

Özel hata sınıfları oluşturmak, farklı hata türlerini daha doğru bir şekilde temsil etmenizi sağlar. Özel hatalar, belirli sorunları tanımlamaya ve ele almaya yardımcı olabilecek ek özellikler veya yöntemler içerebilir.

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

Bu örnekte, CustomError yerleşik Error sınıfını genişletir ve bir hata kodu belirtmek için bir code özelliği ekler.

2. Asenkron Kodda Hata İşleme

Eşzamansız kod genellikle hatalar için özel işleme gerektirir. async ve await ile birlikte try-catch bloklarını kullanmak eşzamansız işlemlerde hata işlemeyi basitleştirebilir.

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

Bu örnek, async, await ve try-catch kullanılarak asenkron fetch çağrısından kaynaklanan hataların nasıl işlendiğini göstermektedir.

3. TypeScript ile React'te Hata Sınırları

React ve TypeScript ile çalışırken, hata sınırları bileşen ağacındaki hataları yakalamaya ve bir geri dönüş kullanıcı arayüzü görüntülemeye yardımcı olur. TypeScript ile hata sınırlarının uygulanması tür güvenliğini ve uygun hata işlemeyi garanti eder.

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;

Bu React örneğinde, ErrorBoundary bileşeni, alt bileşenlerindeki hataları yakalar ve bir hata oluşursa bir geri dönüş kullanıcı arayüzü görüntüler.

4. Hata Türleri için Tür Koruyucularının Kullanımı

Tür koruyucuları, TypeScript'te bir hatanın türünü daraltmaya yardımcı olur. Bu, özellikle farklı türlerdeki veya çeşitli kaynaklardan gelen hataları işlerken faydalıdır.

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 fonksiyonu, yakalanan hatanın CustomError örneği olup olmadığını belirlemeye yardımcı olan bir tür koruyucusudur.

5. Merkezi Hata Yönetimi

Büyük uygulamalar için, hata işlemeyi merkezileştirmek hata yönetimini basitleştirebilir ve tutarlılığı sağlayabilir. Bu, Express.js'deki ara yazılım veya diğer çerçevelerdeki genel hata işleyicileri kullanılarak yapılabilir.

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

Bu örnek, bir Express.js uygulaması için merkezi bir hata işleyicisini gösterir. Tüm hataları yakalar ve genel bir mesajla yanıt verir.

Çözüm

TypeScript'teki gelişmiş hata işleme teknikleri, hata yönetimi üzerinde daha fazla kontrol sağlayarak uygulamalarınızın sağlamlığını artırır. Özel hata sınıfları, eşzamansız hataları işleme, React'te hata sınırlarını kullanma, tür koruyucuları ve merkezi hata işleme, etkili hata yönetimi için temel stratejilerdir. Bu tekniklerin uygulanması, daha sürdürülebilir ve güvenilir koda yol açacaktır.