[TS/React] 타입스크립트로 리액트 vite 시작하기, JS ➡️ TS 변경

 

 

💡 typescript + react + vite 앱 만들어보자!

 

✚

또 다른 명령어.. 새 폴더를 만들고 그 위치에서

npx create-vite-app . --template react-ts

 

폴더까지 새로 만든다면

npx create-vite-app 원하는_폴더_이름 --template react-ts

 

npm install

✚

 

원래는 이렇게 했었지만!

npm create vite@latest
yarn create vite

 

npm 6.x
npm create vite@latest [프로젝트 명] --template react-ts
npm 7+, extra double-dash is needed:
npm create vite@latest [프로젝트 명] --template react-ts

 

 

버전별로 입력하면 된다!

React 로 선택하고, TypeScript + SWC

 

run dev 시 바로 페이지가 열리게 하고 싶다면 package.json 을 수정하면 된다.

    "dev": "vite --open",

 

 

💡 자바스크립트 vite 앱을 타입스크립트로 바꾸고 싶다면?

타입스크립트 vite 앱을 생성하고

src 폴더 내에서 아래 파일만 남기고 전부 지운다.

react-app-env.d.ts

 

그리고 기존 앱의 src 폴더 내 파일들을 카피해온다.

 

마지막으로 확장자를 바꿔주자!

jsx ➡️ tsx, js ➡️ ts

 

 

🔗 https://velog.io/@zzangsubin/vitetyscriptreact

[React, ts, vite] react + typescript + vite로 시작해보기

🔗 https://velog.io/@jwkwon0817/typescript-swc

[ TypeScript ] TypeScript와 TypeScript + SWC의 차이