TypeScript 에서 Error type 좁히기

catch 문에 error 타입 넣기

• error 의 타입을 좁히는 방법은 여러가지가 있다.

• any 방법은 타입을 좁힐 수 없고 as 를 사용하면 타입추론 기능을 사용하지 못하기 때문에 비추천된다.

• 커스텀 타입을 넣어줄 수도 있는데, interface 는 컴파일 이후에는 찾지 못해서 instanceof 로 찾지 못하기 때문에 class 로 타입 설정을 해주는 것이 좋다고 한다.

• error: unknown 으로 타입을 설정해준 후, 백엔드 api 의 에러시 응답값이 들어올 경우는 ApiError 라는 커스텀 타입을 설정하고, 그 외의 케이스들을 분기 처리 해주는 식으로 구현했다.

  // Custom error type
  export class ApiError extends Error {
  public code: string;
  public msg: string;
  
    constructor(code: string, msg: string) {
      super(msg); // Error의 기본 message 필드에 msg를 전달
      this.code = code;
      this.msg = msg;
    }
  }

• 그리고 catch 문 내의 에러 핸들링 함수를 생성해서 다른 error 문에도 적용했다.

  export const handleError = (error: unknown): void => {
    let errorMessage: string;
  
    if (error instanceof ApiError) {
      // ApiError 타입의 에러인 경우
      errorMessage = error.msg;
    } else if (error instanceof Error) {
      // 일반적인 Error 타입의 에러인 경우
      errorMessage = error.message;
    } else if (error === null || error === undefined) {
      // error가 null 또는 undefined인 경우
      errorMessage = '오류가 발생하였습니다.\n다시 시도하여주세요.';
    } else {
      // 알 수 없는 타입의 에러인 경우
      errorMessage = '알 수 없는 오류가 발생하였습니다.';
    }
  
    window.alert(errorMessage);
  };

• error 가 Error 의 instance 가 아닌 경우도 있음.
  - error 를 다른 형식으로 던져줄 수도 있기 때문에 항상 if (error instanceof Error) 와 같이 타입 검사를 넣는 것이 안전하다.

참고 사이트

[번역] 타입스크립트에서 전문가처럼 에러 처리하기
타입스크립트 커스텀 Error 처리하기