TS 변경 1일차

코드 변경하다가 사실 Eslint를 client, server 별로 다운받아야하는데 root에 받아서 npm uninstall까지 했지만 client에서 다시 Eslint를 설치하려고 했더니 package-lock.json에 아직 관련 파일이 남아있어 충돌을 일으켰다..

아직 변경 초반이라서 파일 다 날리고 다시 폴더를 다운받아서 수정하고 있는데 사실을 이렇게 하면 엄청 큰일 난 거 아닌가? 하면서 하고 있다... 누가 충돌 생겼다고 냅다 파일을 삭제하나요... 제가 그랬습니다... ^_ㅠ

 

3시간 넘게 수정하면서 겨우... app.tsx만 수정 완료 했다...

node.js나 react 하면 자연스레 친해지는 stackoverflow... 이렇게 영어 독해 실력을 늘려봅시다

 

 

먼저 만났던 오류들을 기억나는 대로 정리하자면(하나 해결하면 하나 떠서 일일이 기록할 힘이 없었다.)

 

1. Parsing error: '>' expected

 app.js 파일을 app.ts로 바꿔보라길래 바꿨다가 만났던 오류이다.

해결 방법은 app.tsx로 변경하면 된다! <> </> 이런식으로 태그가 들어간 파일은 ts가 아니라 .tsx로 하라더라 (스택오버플로우에서 그랬어요)

 

 

2. Cannot use JSX unless the '--jsx' flag is provided

아마 1번을 해결하고 바로 떴던 오류였나? 파일 전체 삭제 했다가 다시 받고 이걸 몇 번 반복했더니 오류 순서가 기억이 잘 안 난다.

이 방법은 tsconfig.json에서  "jsx":"react-jsx" 를 "jsx":"react"로 바꾸면 된다.

이렇게 해도 나중에 오류가 뜰 수 있다고 해서 VScode 설정을 바꿔줬다.

 

윈도우+R > %appdata% 입력 후 > Code > User > settings.json 파일을 아래와 같이 수정하면 된다.

{
  "typescript.tsdk": "$GLOBAL_NPM_PATH/typescript/lib"
}

 

참고 문헌:

https://velog.io/@rmsry123/error-cannot-use-jsx-unless-the-jsx-flag-is-provided

[에러] cannot use jsx unless the '--jsx' flag is provided

 

 

3. Could not find a declaration file for module 'react-router-dom'.

이제... 돌아가겠지...? 했는데 바로 이런 문제를 만났다... ㅎㅎㅎ 힘들어요 힘들어요

Could not find a declaration file for module 'react-router-dom'.
'/Users/***/project-folder/node_modules/react-router-dom/index.js' implicitly has an 'any' type.

Try `npm i --save-dev @types/react-router-dom` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-router-dom';

 

마지막 줄에 쓰여 있듯이

npm i --save-dev @types/react-router-dom

을 설치했더니 해당 오류는 사라졌다.

 

 

4. Error: TypeScript error in /directory/node_modules/@types/react-router/index.d.ts(149,100): Type expected. TS1110

 

하나 해결하면 바로 하나가 나오고 이걸 해결하면 또 하나가 나오고 눈은 너무 뻑뻑하고 지치고 하여튼 이런 오류도 나왔다..

stackoverflow에서는 typescript의 버전이 낮아서 그런 거 일거라고 ts를 업그레이드하라고 했다.

 

ts 버전 확인

> tsc -v
Version 4.1.3

 

업데이트

> npm update -g typescript@latest

up to date, audited 1 package in 466ms

found 0 vulnerabilities

// 다른 방법

> npm update -g typescript

up to date, audited 1 package in 431ms

found 0 vulnerabilities

이렇게 했는데도 버전은 계속 똑같이 4.1.3이 나와서 왜 안 되는 건가 싶었다.

ts 공식 사이트에서는 4.9.4까지 나왔다 했는데 왜 나는 계속 4.1인지... 왜 업그레이드가 안되는지...

사실 이때부터 갑자기 굉장히 피로해지기 시작했다.

 

그래서 특정 버전으로 써보자! 해서

> npm update -g typescript@4.9.1

up to date, audited 1 package in 438ms

found 0 vulnerabilities

했는데도 실패!

 

 

또 열심히 구글링 영어 읽기 구글링 반복하다가

npm install -D typescript

를 입력했더니 버전이 업그레이드되었다!!!! 난 이제 드디어 탈출이야...

 

 

stackoverflow에서는 redux-saga와 react-scripts도 최신으로 업데이트를 해줬다는데,

일단 전자는 사용하지 않았고 후자는 프로젝트 돌리고 나서 오류 뜨면 업데이트를 하려고 했더니

오류 없이 바로 웹 메인이 떴다!!!!

이제 난 탈출이야..

 

 

 

 

 

js > ts참고 문헌:

https://velog.io/@y_jem/Typescript-Javascript%EC%97%90-Typescript-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

[Typescript] Javascript에 Typescript 적용하기