Typescript - 타입 좁히기 문제 해결

문제점

1. 타입 좁히기 문제: isFetchBaseQueryError 타입 가드 함수는 error 객체의 status 속성만을 확인했었다. 이 때문에 data나 data.error 같은 추가적인 속성들에 대해 TypeScript는 이들의 존재를 보장할 수 없었다.
2. 속성 접근 방식 문제: error.data.error에 직접 접근하려 한 점에서 문제가 있었다. TypeScript는 error.data가 항상 존재한다고 가정할 수 없어, 이로 인해 컴파일 에러가 발생했다.

해결 방법

1. 타입 가드 함수 개선: isFetchBaseQueryError 함수를 수정해 error 객체가 data 및 data.error 속성을 가질 수 있음을 명시적으로 체크하도록 했다. 이 변경은 TypeScript에게 추가적인 속성들의 존재 가능성을 알리는 역할을 한다.
2. 코드 구조 변경: 타입 가드 함수의 수정으로 error.data와 error.data.error 속성들에 대한 존재 여부를 TypeScript가 인식하게 됐다. 이는 속성 접근 시 발생할 수 있는 문제들을 해결해주었다.

이러한 수정을 통해 TypeScript의 타입 체크에 맞게 코드를 개선하고, error.data.error 속성에 접근할 때 발생했던 문제를 해결할 수 있게 되었다. 타입 가드 함수의 변경은 error 객체의 구조에 따른 타입 안전성을 확보하며, 추가적인 속성들이 없는 경우에도 에러 없이 코드가 진행될 수 있게 해준다.

이전 코드

이전 코드에서의 문제점은 error.data.error 속성에 직접 접근하려 했지만, TypeScript가 이 속성의 존재를 보장할 수 없었다는 점이다.

// 이전의 타입 가드 함수
const isFetchBaseQueryError = (
  error: unknown
): error is FetchBaseQueryError => {
  return typeof error === "object" && error !== null && "status" in error;
};

// Demo 컴포넌트 내부에서의 변경된 속성 접근
): isFetchBaseQueryError(error) && error.data ? (
  <p className='font-inter font-bold text-black text-center'>
    Well, that wasn't supposed to happen...
    <br />
    <span className='font-satoshi font-normal text-gray-700'>
      {error.data.error ? error.data.error : "An unknown error occurred"} // 여기서 TypeScript 에러 발생
    </span>
  </p>
) : (

수정된 코드

// 수정된 타입 가드 함수
const isFetchBaseQueryError = (
  error: unknown
): error is FetchBaseQueryError & { data?: { error?: string } } => {
  return typeof error === "object" && error !== null && "status" in error;
};

// Demo 컴포넌트 내부에서의 변경된 속성 접근은 동일하게 유지
): isFetchBaseQueryError(error) && error.data ? (
  <p className='font-inter font-bold text-black text-center'>
    Well, that wasn't supposed to happen...
    <br />
    <span className='font-satoshi font-normal text-gray-700'>
      {error.data.error ? error.data.error : "An unknown error occurred"}
    </span>
  </p>
) : (

비교

• 타입 가드 함수: 이전 코드에서는 단순히 FetchBaseQueryError 타입만 체크했지만, 수정된 코드에서는 error.data.error 속성까지 고려한다.

• 속성 접근: 두 코드 모두 error.data.error에 대한 접근 방식은 같다. 하지만 수정된 타입

  가드 함수 덕분에 TypeScript가 error.data.error의 존재를 인식하게 되어, 이전 코드에서 발생했던 문제를 해결할 수 있었다.

결과적으로, 타입 가드 함수의 수정이 TypeScript에서의 속성 접근 문제를 해결하는 핵심 요인이 되었다.