JS프로젝트를 TS로 바꾸자

JS를 TS로 마이그레이션 하기

create-react-app

create-react-app 템플릿 모음

마이그레이션 : 데이터 / 소프트웨어 같은 것을 한 시스템에서 다른 시스템으로 옮기는 것

1. 새로운 프로젝트를 타입스크립트 템플릿으로 생성하기

npx create-react-app (폴더명) --template typescript

1. 기존 소스코드 파일 복사하기

: 새롭게 생성한 프로젝트의 src 폴더에서 아래 파일들을 제외하고 모두 지워주기

src/react-app-env.d.ts
src/reportWebVitals.ts
src/setupTests.ts

만약, 성능 측정 기능(reportWebVitals.ts) / 테스트 기능(setupTests.ts)은 사용하지 않는다면 지워도 괜찮다.

1. 파일 확장자 바꾸기

   src 폴더에 있는 js파일의 확장자를 ts로 바꾸면된다. 파일에 JSX 문법이 있다면 .tsx로 확장자를 바꾸고, 일반적인 js 파일이라면 .ts로 바꾸면된다.

Vite

vite 가이드

1. 프로젝트 생성

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

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

1. 기존 소스코드 파일 복사하기

src폴더에서 src/react-app-env.d.ts파일을 제외하고 모두 지우기

→ vite프로젝트에서 미리 세팅해 놓은 타입 정의가 적혀있다. 프로젝트에서 사용하는 여러 파일 확장자에 대한 타입의 정의이다.

기존 프로젝트 소스코드에서 src폴더에 있는 파일들을 모두 복사해서 src 폴더로 넣는다.

기존 프로젝트의 소스코드에서 index.html 파일과 index.html 에서 사용하는 favicon.ico 같은 파일들이 있다면 같이 복사해서 새로운 프로젝트로 옮겨줍니다.

1. 파일 확장자 바꾸기

src 폴더에 있는 js파일의 확장자를 ts로 바꾸면된다. 파일에 JSX 문법이 있다면 .tsx로 확장자를 바꾸고, 일반적인 js 파일이라면 .ts로 바꾸면된다.

주의사항

기존 패키지에서 타입을 찾을 수 없을 때

@types 타입 설치하기

npm install --save-dev @types/패키지_이름

tsconfig 설정

"jsx": "react-jsx"

→ 트랜스파일링 : ts → js / jsx → js로 변경하는 것

• tsx → js : react / react-jsx (jsx를 js로 바꾸는 경우)
• tsx → jsx : preserve (jsx는 그대로 두는 경우)