[TS - Error Handling] TypeScript error 모음.zip

💡1️⃣ Component definition is missing display name

🧙 보여질 이름이 없다는 타입스크립트 에러로 그냥 컴포넌트 이름과 같은 문자열을 아래와 같이 넣어주면 된다.

// Input.tsx
Input.displayName = "Input";

🔗 Component definition is missing display name for forwardRef

---

💡2️⃣ catch문에서 err에 대한 타입을 지정하지 않을 경우 'error' is of type 'unknown'.

⇒ error: AxiosError 타입을 지정해주면 또 다른 에러 발생
Catch clause variable type annotation must be 'any' or 'unknown' if specified.

🧙 타입 단언으로 error를 다시 변수로 선언해준 후, property를 사용하고자 할 땐 옵셔널체이닝을 걸어주면 된다.

try {
	...
} catch (error) {
  const err = error as AxiosError;

  if (err.response?.status === 401) {
    console.log(err.response?.status);
  }
}

또는 아래와 같은 if문을 통해 AxiosError인지 판별 후에 처리도 가능함

try {
	...
} catch (error) {
  if (axios.isAxiosError(error)) {
    setErrorMessage(String(error.response?.data));
  }
}

🔗 axios Error typescript, annotation must be 'any' or 'unknown' if?

🔗 https://github.com/axios/axios/issues/3612

---

💡3️⃣ Argument of type 'unknown' is not assignable to parameter of type 'SetStateAction<string>'.

type이 String이여야 하는데 unknown이여서 발생하는 에러같다.

🧙 String()을 통해 문자열로 변환해주니까 해결!

setErrorMessage(err.response?.data); // <- error code

// ====> solving error!

setErrorMessage(String(err.response?.data));

🔗 https://github.com/Buuntu/fastapi-react/issues/168

---

💡4️⃣ The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLUListElement>, HTMLUListElement>’

🧙 root tag를 <div> → <> fragment tag로 수정하니까 해결!

<div> // <- error code
  <div>{userInfo.name}</div>
	...

  {data.map((el) => {
    <div key={el.sabun}>{el.sabun}</div>;
  })}
</div>

// ====> Solving error
<>  // <- fix
  <div>{userInfo.name}</div>
	...

  {data.map((el) => {
    <div key={el.sabun}>{el.sabun}</div>;
  })}
</>