React - TypeScript로 생성하기

 

React Project 생성

- 타입스크립트를 사용할 리액트 프레적트를 만들때

 

$ npx create-react-app [프로젝트 명] --typescript

--typescript 가 있으면 타입스크립트 설정이 적용된 프로젝트가 생성된다.

 

 

 

- 만약, 이미 만든 프로젝트에 타입스크립트를 적용하기 싶다면 

 

타입 정의 파일을 다운받는다.

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

 

타입스크립트 코드를 작성하기 위해 typescript 패키지도 설치한다.

$ npm install --save-dev typescript

 

다운로드한 typescript명령어를 이용하면 타입스크립트 설정 파일을 생성 할 수 있다.

$ npx typescript --init

초기화를 의미하는 -init 옵션을 붙여 실행하면 tsconfig.json 파일이 자동으로 생성된다.

 

리액트 jsx코드를 사용하기 위해서는 compilorOptions의 jsx 속성에 "react"값을 추가해야 한다. \

(기본값은 주석처리되어있음)

"compilorOptions": {
  "jsx": "react"
...

 

 

참고 할만한 사이트 

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

 

[ tip ]

VScode는 tsconfig.json을 참고해서 타입스크립트 문법을 검사한다.

뿐만 아니라 웹팩에서 설정한 ts-loader가 이 파일을 참고해서 트랜스파일 작업을 하기 때문에 tsconfig.json 파일을 먼저 생성 해야한다.

 

 

[ 만약 에디터를 사용 할 수 없는 환경에서 작업한다면 ] 

Codesandbox의 resct-ts 샌드박스를 사용하는 것을 추천한다.