React 프로젝트에 TypeScript 추가

간단한 명령을 사용하여 신규 및 기존 리액트 프로젝트에 TypeScript를 추가하는 방법을 소개합니다.

React 프로젝트에 TypeScript 추가

많은 개발자가 React 및 Angular 프로젝트 모두에서 TypeScript를 사용하는 것을 선호합니다. 때때로 우리는 JavaScript로 빌드된 애플리케이션이나 프로젝트를 얻었고 이러한 프로젝트에 TypeScript를 추가하려고 합니다.

이 튜토리얼에서는 새로운 React 애플리케이션을 생성하거나 이미 빌드된 프로젝트에 TypeScript를 추가하는 두 가지 시나리오를 모두 살펴보겠습니다. 먼저 새로운 react application 설치부터 시작하겠습니다.

TypeScript 템플릿을 사용하여 React 애플리케이션을 설치하는 방법에는 두 가지가 있습니다. 하나는 npx를 사용하는 것입니다.

다음 명령을 사용하여 TypeScript 템플릿으로 새로운 React 애플리케이션을 쉽게 설치할 수 있습니다.

# NPX
npx create-react-app New-app --template typescript

이 명령은 최신 버전의 새로운 반응 애플리케이션을 설치합니다. 이제 yarn을 사용하여 반응 애플리케이션을 설치하려면 아래 명령을 실행할 수 있습니다.

# YARN
yarn create-react-app New-app --template typescript

이제 JavaScript 템플릿을 사용하여 빌드한 프로젝트가 이미 있고 이를 TypeScript 프레임워크로 변환하려는 두 번째 시나리오를 살펴보겠습니다.

먼저 아래와 같이 npm을 사용하여 TypeScript를 프로젝트에 설치하려면 다음 명령을 실행해야 합니다.

# NPM
npm install --save typescript @types/node @types/react @types/react-dom @types/jest

yarn을 사용하여 프로젝트를 설치한 경우 아래 명령을 실행해야 합니다.

# YARN
yarn add typescript @types/node @types/react @types/react-dom @types/jest

TypeScript와 그 종속성을 설치하고 나면 JavaScript 파일의 이름을 .js에서 .ts로 바꿀 수 있습니다. 모든 파일을 TypeScript로 변경한 후 개발 서버를 다시 시작합니다.

유형과 관련된 몇 가지 오류가 있습니다. 새로운 기능을 개발하기 전에 프로젝트의 필요에 따라 이러한 오류를 수정해야 합니다.