기존 CRA프로젝트에 typescript 템플릿 추가하기

1. 패키지 설치 

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

 

2. 경로에 있는 js파일 ts, tsx로 확장자 변경해준다.

3. "npx tsc --init" 명령어로 tsconfig.json 파일 생성한 후, tsconfig.json 파일에 "jsx": "react-jsx"추가
4. src/index.tsx에서 수정

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);

5. 타입이 없다고 나오는 패키지들 타입 추가하기
(패키지를 다운받고 타입이 없는경우는 definitelyTyped 페이지에 왠만한건 다 있을거다)

npm i --save-dev @types/styled-components

 

CRA에서 처음부터 타입스크립트 template 설치하는 법

npx create-react-app 프로젝트이름 --template typescript