typescript의 error 처리

useEffect(() => {
    const getMeals = async () => {
      setIsLoading(true);
      try {
        const response = await fetchMeals();
        setMeals(response);
      } catch (error) {
        
          setError({ message: error.message });
        
      }
      setIsLoading(false);
    };
    getMeals();
  }, []);

과 같은 코드를 짜고 있는데 

setError 부분에서 
'error'은(는) 'unknown' 형식입니다.ts(18046)

에러가 났었다

난 분명 fetchMeals 함수에서 에러가 났을 경우 throw new Error를 통해 에러 객체를 보내줬었는데

왜 계속 unknown이라고 하는거지 하고 헤맸었다

 

ai에게 물어보니 이유가 다음과 같다고 한다

 

1. TypeScript는 기본적으로 catch 절의 매개변수를 unknown 타입으로 취급합니다. 이는 TypeScript 2.0부터 도입된 안전한 에러 처리를 위한 기능입니다.
2. 비동기 함수에서 발생하는 오류는 다양한 원인(네트워크 오류, 파싱 오류 등)으로 인해 발생할 수 있으며, 이들이 모두 Error 인스턴스라고 보장할 수 없기 때문입니다.

 

이렇기 때문에 

useEffect(() => {
    const getMeals = async () => {
      setIsLoading(true);
      try {
        const response = await fetchMeals();
        setMeals(response);
      } catch (error) {
        if (error instanceof Error) {
          setError({ message: error.message });
        }
      }
      setIsLoading(false);
    };
    getMeals();
  }, []);

이렇게 타입 가드를 넣어주면 된다