[TS - Error Handling] TypeScript error ๋ชจ์Œ.zip

Beanxxยท2023๋…„ 4์›” 1์ผ
0

Error-Handling

๋ชฉ๋ก ๋ณด๊ธฐ
6/7
post-thumbnail

๐Ÿ’ก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>;
  })}
</>
profile
FE developer

0๊ฐœ์˜ ๋Œ“๊ธ€