react와 typescript 같이 사용하기

react와 typescript 같이 사용하기

직접 세팅하는 방법과 CRA로 생성하는 방법이 있다.
우선 CRA로 생성하는 법은 아래와 같다.

기존 npx create-react-app에서 --typescript를 붙이면 된다.

CRA 방법

 npx create-react-app <file name> --typescript

설치를 마친 후에 js와 jsx파일을 tsx나 ts 바꿔주어야한다.
이렇게 바꾸었을때, 컴파일 에러가 뜬다. js 파일을 다 바꾸었어도 index.js 파일을 읽을 수 없다고....
이것을 해결할 수 있는 방법은 node_modules를 다 지우고 npm i명령어로 다시 인스톨 해주면 된다.!!!

직접 세팅하기

CRA말고 직접 세팅하는 방법은 아래와 같다.

1. 빈 디렉토리 생성하고 npm으로 초기화한다.

   $ npm init -y

2. package.json 파일이 생성된 후에 리액트와 타입스크립트 패키지를 설치한다.(타입스크립트를 사용하기 위해서는 typescript 패키지도 설치해야 한다.)

   $ npm install --save react react-dom
   $ npm install --save @types/react @types/react-dom

3. tsconfig.json파일을 생성한다.

   $ npx typescript --init

4. tsconfig.json파일 세팅하기(세팅이 너무 많아서 나중에 세팅만 따로 글을 쓸 예정^^..)

   "compilorOptions": {
     "strict": true,
     "target": "es5",
     "lib": [
     "dom",
     "dom.iterable",
     "esnext"
     ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "noFallthroughCasesInSwitch": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx" // 리액트 jsx 코드를 사용하기 위해서는 필수! 
     },
     "include": [
     "src"
     ]
   }

그 외 자주 사용하는 CLI 명령어

1. axios

   npm i axios @types/axios

2. react-router-dom

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

3. react-redux

   npm i react-redux @types/react-redux

4. styled-components

   npm i styled-components @types/styled-components

5. sass/scss

   npm i node-sass

   타입스크립트에서 nodeJS 사용하기

   npm i -D ts-node

세팅관련 참고 할 사이트

https://velog.io/@ansrjsdn/TypeScript-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%84%A4%EC%A0%95