[타입스크립트] 리액트 프로젝트에 타입스크립트 도입하기

1. npm install --save typescript @types/node @types/react @types/react-dom @types/jest 으로 타입스크립트 리액트 모듈을 설치한다.

 

2. .jsx 확장자 파일을 .tsx 로 바꾼다.

 

3. npm start 를 했더니 chalk.constructor is not a construtor 이라는 에러가 떴다.

구글링 해도 에러의 원인을 찾기 어려워서 아마 기존에 존재하는 js 관련 모듈과 ts 가 충돌이 날것이라고 추측했다.

그래서 일단 차근차근 해야할것을 진행해보기로 했다.

 

4. tsconfig.json 추가

 

5. package.json 에 dependency 파일들을 앞에 @types/ 를 붙여서 타입스크립트 파일로 바꿈. 단,

 react-scripts 는 앞에 @types 을 붙이는게 아니라 뒤에 -ts를 붙임.

"react-scripts-ts": "4.0.3", 

 

6. package.json 을 수정한 뒤, npm install -force 로 대충 업데이트를 한 뒤 (에러, 워닝은 엄청 뜸)

다시 npm start 를 하면 아까 3번에서 떴던 에러가 안뜬다.! ( 아마 react-scripts-ts 로 업그레이드해서 안뜨는거인듯)

 

7.  mime. lookup is not a function 에러 발생.

index.js 의 838,845 번째 줄을 lookup 메서드를 getType 으로 바꿨다.

 

8. 수정하고 다시 실행했더니 Cannot read property 'getType' of undefined 라는 에러발생.

var charset = mime.getType(type) 이렇게 수정한 뒤,(.charset 을 없앰)

다시 실행했다.

 

 

9. 이번엔  'send' 라는 모듈을 찾을 수 없다는 에러

https://stackoverflow.com/questions/17162308/node-js-error-cannot-find-module-express 에서

원인을 찾아보니 express 를 설치하면 된다고해서 npm install express 를 설치하려고 했으나

 

10. 이번엔 또다른 에러

에러 내용을 읽어보니 react-scripts-ts 와 typescripts 의 버전이 안맞아서 나는 오류같았다.

 

11. 디펜던시,버전 관련 에러는

"npm install --legacy-peer-deps" 로 디펜던시 문제를 확인할 수있다.

그 결과 package.json 에 쓰여진 버전이 잘못된 것임을 알 수있었고,

5번 단계에서 패키지 앞에 @types/ 를 붙일때 타입스크립트 패키지의 버전은 다를 수 있으므로 버전을 갱신해줬어야한다.

 

12. 기존의 react-script 를 react-script-ts 로 변경했는데, 이 부분에서 에러가 발생한것같아 원래대로 react-script 로 바꾸고 npm install 로 재설치를 했더니 에러가 해결되었다.

 

13. axios 요청들이 모여있는 파일이름을 처음에 axios.ts 로 바꿨는데, 이걸 axios.js 로 바꿨더니 에러가 해결되었다.

14. mui 를 import 하지 못해서 tsconfig.json 에서 moduleResolution 을 Node 로 바꿨더니 에러가 해결되었다.

15. 리엑터 라우터돔 타입스크립트 버전(5.x.x) 에서는 아직 useNavigate 가 도입이 안돼서 UseHistory 로 변경했더니 에러가 해결되었다.

 

설치 참고자료:

https://create-react-app.dev/docs/adding-typescript/