[React] - CRA 프로젝트 타입스크립트로 변경하기

단기간에 결과물을 만들어내야 하는 프로젝트 특성상

타입스크립트를 선뜻 시도하지는 못했다.

 

타입스크립트 강의들으면서 공부하다 보니

어느 정도는 알게 됐지만

실제로 프로젝트에 적용하는 게

더 빨리 배우는 지름길이라 믿고

기존 cra로 구성한 프로젝트를

타입스크립트로 마이그레이션 해보기로 마음먹었다.

웹팩과 cra는 타입스크립트 입히는 데에 있어서 차이가 있다.

 

 

그 과정을 알아보자

 

 

1. TypeScript 추가

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

혹은

yarn add typescript @types/node @types/react @types/react-dom @types/jest

위의 명령어로 리액트와 노드의 환경에

types를 입혀준다.

 

 

 

2. tsconfig.json파일 생성

 

다음

타입스크립트의 가장 중요한

tsconfig.json

파일을 생성해줘야 하는데

이 파일은 타입스크립트를 어떤 환경에서 쓸 건지를 결정하고

설정을 변경해 줄 수 있는 파일이다.

 

 

이 파일을

npx tsc --init

위의 명령어로 생성해 줄 수 있다.

 

 

찾아보니

npx typescript --init

 이 명령어도 사용할 수 있다고 하는데

나 같은 경우엔 이 명령어로는 tsconfig.json파일이 생성되지 않았다 ㅠ

 

 

3. package.json에 @types/~~~ 설치

 

파일이 생성된 후 

package.json에 들어가서

@types가 잘 입혀졌는지 확인하고

 

1번에서 설치했던 것들 외에도

현재 설치하여 사용하고 있는 모든 라이브러리들에

@types 버전을 추가해줘야 한다.

 

 

예를 들어

axios를 설치해서 사용하고 있었다면

yarn add @types/axios

이렇게 설치해줘야 한다.

 

한 번에 모든 라이브러리를 다 설치하기는 힘드니

jsx or js확장자파일들을 하나씩 

tsx or ts 확장자로 고쳐서

그때 그 때 필요한 라이브러리를 추가설치하고

ts문법에 맞게 수정해 주면 아주 좋다.

 

 

어제부터 타입스크립트로 변경을 시작했는데

워낙 공부해야 될게 많다 보니

언제 끝날지는 모르겠다..

 

디벨킷 타입스크립트로 변경완료!

라는 제목의 글을 쓰게 될 그날까지 

달려보자 파이팅~