TypeScript 및 Create-React-App

빠른 방법!

React에서 TypeScript를 사용하고 싶지만 어떻게 시작해야 할지 잘 모르겠습니다. 당신은 바로 이곳에 왔습니다! (이번에는 TS 구문에 대해 이야기하지 않습니다. 단지 시작하고 실행하는 것뿐입니다.)

땅콩 버터와 젤리처럼

처음부터 새로운 앱

새 앱을 빌드하고 create-react-app을 사용하는 경우 Create React App 문서가 좋습니다.

템플릿을 사용하여 새 TypeScript 앱을 시작할 수 있습니다. 제공된 TypeScript 템플릿을 사용하려면 --template typescript생성 명령에 추가하십시오 .

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

아름다움의 것!

이미 프로젝트를 시작했고 TypeScript로 변환하려는 상황에 처했다면 걱정하지 마세요! 그것에 대한 해결책도 있습니다.

기존 앱을 TypeScript로 변환

터미널에서 TypeScript를 설치할 앱 디렉터리로 이동합니다.

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

여기에서 문제가 발생할 수 있습니다. App.tsx파일 을 열면 거의 모든 항목에 빨간색 밑줄이 그어진 것을 볼 수 있습니다. 별로.

먼저, import React from 'react'아직 하지 않았다면 파일의 맨 위에 하고 싶을 것 입니다.

VSCode에서 밑줄이 그어진 요소 위로 마우스를 가져가면 "' — jsx' 플래그가 제공되지 않으면 JSX를 사용할 수 없습니다."라는 메시지가 표시됩니다. 이 시점에서 "빠른 수정" 옵션을 클릭하거나 수동으로 수정할 수 있습니다. "빠른 수정"을 클릭하면 "구성 파일에서 ' — jsx' 플래그 활성화"라는 옵션이 표시됩니다. 클릭하면 로드하는 데 1~2초가 걸리고 오류가 사라집니다.

저는 다크 모드를 사용하지 않습니다. 부담 없이 @ me

수동으로 수행 할 경우에 이동 tsconfig.json, 파일의 키를 찾습니다 "jsx", 그리고에 값을 변경 "react"하는 대신 react-jsx.

tsconfig.js파일 에서 여전히 오류가 발생 하면 다른 버전의 TypeScript를 사용 중일 수 있습니다. 입력 cmd + shift + p하여 VSCode에서 빠른 설정을 열고 "TypeScript: TypeScript 버전 선택..."을 찾습니다. 그것을 클릭하고 "작업 공간 버전 사용"을 선택하십시오.

이제 오류가 없고 코드가 컴파일 중이며 환상적인 앱을 실행할 준비가 되었길 바랍니다!

연결하고 싶습니다! LinkedIn , GitHub , Twitter 에서 저를 찾으세요 .