TypeScript의 고급 오류 처리 기술

효과적인 오류 처리가 견고한 TypeScript 애플리케이션을 구축하는 데 필수적입니다. 기본적인 try-catch 블록 외에도 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 및 await와 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');

이 예제에서는 async, await, try-catch을 사용하여 비동기 fetch 호출에서 발생하는 오류를 처리하는 방법을 보여줍니다.

3. TypeScript를 사용한 React의 오류 경계

React와 TypeScript로 작업할 때 오류 경계는 구성 요소 트리에서 오류를 포착하고 대체 UI를 표시하는 데 도움이 됩니다. 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 구성 요소는 자식 구성 요소에서 오류를 포착하고 오류가 발생하면 대체 UI를 표시합니다.

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에서 오류 경계 사용, 유형 가드 및 중앙 집중식 오류 처리가 효과적인 오류 관리를 위한 필수 전략입니다. 이러한 기술을 구현하면 유지 관리가 더 용이하고 안정적인 코드가 생성됩니다.