[TS - Error Handling] TypeScript 플젝 중 맞닥뜨린 error 모음.zip🤐

전에 JS -> TS 마이그레이션 하면서 맞닥뜨린 에러들과 같은 글에 포스팅했었는데 양이 많아져서 따로 분리해서 포스팅! ✍️

💡1️⃣ http-proxy-middleware TS 호환 error

setupProxy 파일을 TS로 설정한 후에 localhost:3000에서 아래와 같이 사이트에 연결할 수 없음 이라는 문구가 떠버렸다,,😱
프록시 설정 후 서버를 껐다 키기 전까지는 axios error가 계속 떠서 원인을 해결하지 못한채 다른거 하고 있었는데,
다시 npm start로 브라우저 연결하니까 아예 브라우저 연결이 안되었던 것,,
npm start하면 아래와 같은 onAfterSetupMiddleware option is deprecated. 에러 문구가 떠서 프록시 설정 문제인거 같긴 했는데
첨에 구글링했을 땐 'node_modules 폴더를 삭제하고 다시 install 해라~'라는 답변을 봐서 그렇게 했는데도 해결이 안됐었다.🥲

뭐가 원인인지 몰라서 이것저것 코드 수정해보다가 결국 commit 되돌렸는데, 알고보니까 프록시 설정할 때 사용했던 모듈인 http-proxy-middleware가 타스랑 호환이 안되었던 것이다,, 그래서 고냥 setupProxy.ts 파일을 js로 고치니까 axios error도 해결쓰..;
⌦ 결론: http-proxy-middleware 모듈은 ts와 호환인 안되니까 setupProxy 파일은 고냥 js로 써라~

🔗 http-proxy-middleware error 해결 참고자료

---

💡2️⃣ Object is possibly ‘null’.

221119
createdUser랑 user 둘 다 이 에러가 떴었다..
이 에러 문구는 뒤늦게 보고 무조건 첫줄에 타입 문구만 보고 interface로 타입을 지정하기 급급했었는데 이래도 에러가 해결이 안되서 다시 보니까 요런 에러 문구가 있었던것..!

객체가 null일 수도 있다는 에러로 에러나는 부분에 옵셔널 체이닝(?.)을 걸어줘서 해결했다!

---

💡3️⃣ An import path cannot end with a ‘.ts’ extension.

import 과정에서 확장자명에서 난 오류

고냥 확장자명 삭제해주면 됨!

import LoginDiv from "./UserCSS";

---

💡4️⃣ error 부분에서의 Object is of type ‘unknown’ error

일단 error를 unknown 타입으로 지정한 후에 별도로 타입을 지정해주면 된다!

interface ErrorType { // <- here!!
  code: string;
  message: string;
}

try {
	...
} catch (error: unknown) {
  const err = error as ErrorType; // <- here!!
  ...
}

---

💡5️⃣ Argument of type ‘~’ is not assignable to parameter of type ~.

💫 Argument of type ‘{}’ is not assignable to parameter of type ~.

{} → Object로 변경해주면 됨

const [postInfo, setPostInfo] = useState<PostListType>(Object);

💫 Argument of type ‘ChangeEvent<FormControlElement>’ is not assignable to parameter of type ‘ChangeEvent<HTMLInputElement>’.

이 에러를 해결하려고 FileUpload() 함수의 인자 타입만 계속해서 만지작거렸는데 onChange 안의 e 타입을 지정해주면 되는거였다,,

e 타입을 React.ChangeEvent<HTMLInputElement>로 지정해주기!

<Form.Control
    ...
    onChange={(e: React.ChangeEvent<HTMLInputElement>) => FileUpload(e)}
/>