[주니어도 하는 타입스크립트] 리액트 프로젝트에서 타입스크립트 사용하기

타입스크립트를 이용하면 코드를 보다 안정적이고 재사용가능하게 짤 수 있다는 이점이 있어, 이 부분을 평소 쓰던 프레임 워크인 리액트에 이용하고 싶어졌다.

 

그래서 리액트에 타입스크립트로 프로젝트를 생성해보고자 했다.

마침 리액트 공식 문서에 이 부분이 친절히 명시되어 있다.

 

 

1. 타입스크립트로 리액트 앱 생성하기

npx create-react-app my-app --template typescript

혹은

yarn create react-app my-app --template typescript

 

로 명령어를 치면 tsx 확장자로 앱이 생성된다.

 

 

2. 리액트 앱에 타입스크립트 추가하기

 

이미 리액트 앱이 생성이 되어 있다면 install 혹은 add로 타입스크립트 추가가 가능하다.

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

 

로 명령어를 치고 js의 파일을 tsx로 변경해준다.

 

 

 

 

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