입문

지난해 9월 [TypeScript]create-react-app으로 기본 무압력 개발 환경 구축 시작 기사를 투고했다.그러나 현재 공식적인create-react-app은 TypeScript를 지원하며 상술한 방법은 추천하지 않습니다.create-react-app-typescript 저장소도 이미 보관되어 있습니다.최근에도 이 같은 기사의 열람과 찬사를 받았기 때문에 공식적인 React+TypeScript 항목 설정 방법을 다시 쓰기로 했습니다.앞으로 시작하실 분은 여기를 참고하세요.
견본
https://github.com/Julia0709/ts-react-app2

0. 사전 준비

Node.js가 설치되었는지 확인하십시오.다음 명령을 실행할 때v10.16.0와 같은 숫자가 나타나면 됩니다.

$ node -v

Node.js가 설치되어 있지 않으면 아래에서 OS에 맞는 설치 프로그램을 다운로드하여 실행하십시오.
https://nodejs.org/ja/download/

1. 새 항목 만들기

1-1. create-react-app

다음 명령을 실행합니다.my-app 섹션은 프로젝트 이름입니다. 임의의 이름으로 변경하십시오.npx를 시작으로 전역 설치가 없어도create-react-app을 사용할 수 있습니다.

$ npx create-react-app my-app --typescript

1-2. 프로젝트 시작

완성 후 Happy hacking! 이 글자가 나타날 것 같아서 만든 디렉터리로 이동합니다.

$ cd my-app

프로젝트를 시작합니다.추천하는 yarn을 사용하지만 npm에 대해서는 yarn 을 npm 로 변경하십시오.

$ yarn start

http://localhost:3000 브라우저에서 Welcome to React로 표시되면 성공적으로 열립니다.

중지 시간은 control + c 입니다.

2.git 설정

일어설 것을 확인했기 때문에 여기서git를 설정하고 한 번 제출합니다.Initial commit 제출 메시지로 변경해야 합니다.필요한 경우 Github 저장소를 만들고 협력합니다.

$ git init
$ git add .
$ git commit -m "Initial commit"

3. 개발 환경 설정

이것은 이 보도의 본제이다.작업을 시작하기 전에 먼저 편리한 설정을 하세요.

3-1. devDependencies(package.json)

다음 3개husky, lint-staged, prettier를 설치하면 제출 시 자동으로 코드를 성형할 수 있다.생산이 필요하지 않기 때문에 설치-D를 전체devDependencies로 한다.

$ yarn add -D husky lint-staged prettier

편집기에서 열기 package.json 필요한 내용을 추가합니다.저는 개인적으로 scripts 을 dependencies 위에 놓고 싶어서 이 시간에 위치를 교환합니다.
마지막 } 전에 다음 lint-staged 명령을 추가합니다.확장자가 ts 또는 tsx 이면 prettier 에서 실행된 후 git add 를 나타냅니다.
package.json

{
  ...
  "lint-staged": {
    "*.{ts,tsx}": [
      "prettier --write",
      "git add"
    ]
  }
}

그리고 precommit시에 상기lint-staged를 집행하기 위해 package.json의 마지막에 다음과 같은 내용을 추가한다.
package.json

{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

prettier의 규칙을 변경하려면 package.json 안에 다음 설정을 추가하십시오.나는 기본적으로 더블 따옴표를 싱글 따옴표로 바꾸었다.또한 커밋할 때 불필요한 차이를 방지하기 위해 "trailingComma": "all" 을 사용하여 모든 줄에 쉼표를 추가할 수 있습니다.prettier 공식 문서 에서 다른 옵션을 볼 수 있습니다.
package.json

{
  ...
  "prettier": {
    "tabWidth": 2,
    "singleQuote": true,
    "trailingComma": "all"
  }
}

3-2. tslint.json

TSLint가 ESLint에 통합되었으므로 필요한 경우 ESLint를 설치하십시오.TypeScript에서 오류가 있으면 먼저 컴파일이 통과되지 않기 때문에prettier를 사용하고 멤버들이 TypeScript에 익숙해지면 특별한 설정이 필요 없습니다.하지만 필요하지 않은 변수의 규칙 등을 알려주고 코드를 원활하게 할 수 있는 것은 필요에 따라 하면 된다.ESLint에 관해서는 자신의 규칙이 고정되어 있다면 다른 기사에서 공유하고 싶습니다.

3-3. tsconfig.json

여기에서 src 또는 components 등의 디렉토리를 생성하여 파일을 구성합니다.containers의tsconfig.json에 추가compilerOptions,paths로 읽으면 기술된 경로가 짧아지고 디렉터리 구조를 변경해도 이곳의 경로만 변경하면 되므로 추천합니다.공식적인create-react-app은 지원하지 않는 것 같습니다. 할 수 없습니다.😢

끝내다

이후 스타일 라이브러리와 스토리북을 필요에 따라 가져오고precommit에서 테스트합니다.다른 추천 설정이 있으면 알려주세요.즐거운 React + TypeScript 생활!

참조 URL

Adding TypeScript · Create React App

Prettier 입문~ ESLint와 다른 점을 이해하고 사용~