프로젝트 SPAM #7 타입에러 2571

‘error’ is of type ‘unknown’ (ts2571)

 

이전에는 error: any 타입이었기 때문에 ts error가 발생하지 않았다. 버전 4.4부터 unknown 타입으로 정의되어서 ts error(ts2571)가 발생한다.

 

◆ 해결법

◇ any 타입 강제 변경

(async () => {
   try {
      await axios.get('/user/12345'); // axios 라이브러리 코드에서 에러가 발생할 경우
   } catch (err: any) {
      console.error(err.message); // 자체 자바스크립트 에러 객체
      console.error(err.response.data) // axios 라이브러리 에러 객체
   }
})();

추천하지 않는다. 더군다나 우리 프로젝트는 any 타입을 막아놨다 껄껄.

 

 

◇ 타입 단언하기

새로운 Error Interface(혹은 type)을 정의하고, Type Assertion을 해주는 방법

interface CustomError extends Error {
   // name: string; 
   // message: string;
   // stack?: string; - Error 인터페이스 프로퍼티들을 직접 쓰거나 아니면 상속해준다.
   
   response?: {
      data: any;
      status: number;
      headers: string;
   };
}

try {
   await axios.get('/user/12345');
} catch (err: unknown) {
   const customErr = err as CustomError; // 타입 단언한 것을 변수에 넣어서 뒤에서 자주 쓰이면 재사용 될 수 있게
   console.error(customErr.response?.data);
   console.error(customErr.response?.status);
   console.error(customErr.response?.headers);
}

 

 

◇ 타입 가드하기(추천)

instaceof 이용해 타입가드 하기

// 인터페이스는 컴파일되면 자바스크립트에서 사라지기 때문에 err instanceof CusomError 가 불가능하게 된다.
// 그래서 컴파일되도 남아있는 클래스를 타입으로 이용하는 방법을 쓰는 것이다.
class CustomError_Class extends Error {
   response?: {
      data: any;
      status: number;
      headers: string;
   };
}

try {
   await axios.get('/user/12345');
} catch (err: unknown) {
   if (err instanceof CustomError_Class) {
      console.error(err.response?.data);
   }
}

 

 

출처: Inpa Dev

[TS] 📘 타입스크립트 - 커스텀 Error 처리하기

 

오늘도 여전히 타입스크립트 에러와의 전쟁 중