React+TypeScript 프로젝트 구축 사례 설명

react 프로젝트 구축 은 간단 할 수 있 지만 type:script 과 결합 하면 번 거 롭 지 않 고 홈 페이지 에 도 명확 한 설명 이 있 습 니 다.두 가지 방법 이 있다.
    1.type:script 이 있 는 react 프로젝트 를 직접 구축 하려 면 추가 적 인 파 라 메 터 를 추가 해 야 합 니 다.모드 는 기본 cra-template 를 사용 할 수 없습니다.cra-template-typescript 을 사용 합 니 다.

npx create-react-app tsreactdemo --template typescript

     
    완 성 된 성공 알림 을 만 드 는 것 은 원래 와 크게 다 르 지 않 습 니 다.프로젝트 경로 에 직접 들 어간 다음 에 Yrn start 또는 npm start 입 니 다.
   
    프로젝트 에 들 어가 면 서 두 르 지 않 고 시작 합 니 다.먼저 파일 이 어떻게 생 겼 는 지 보 세 요.기본 값 은 tsconfig.json 을 만 들 고 src 디 렉 터 리 에 있 는 기본 index.js,App.js 파일 은 ts 버 전의 index.tsx,App.tsx 로 변 합 니 다.

    package.json 의 의존 도 를 볼 수 있 습 니 다.
    
    사실 의존 도 는@types/jest,@types/node,@types/react,@types/react-dom 입 니 다. 。
    최초 로 typescript 을 만 든 react 프로젝트 명령 은 npx create-react-app xxx--typescript 인 것 같 습 니 다.그러나 지금 은 안 됩 니 다.뒤의 매개 변 수 는--template typescript 이 어야 합 니 다.직접--typescript 이 아 닙 니 다.이것 은 우리 가 잘못 한 것 이 아니 라 원래 이렇게 사용 한 것 입 니 다.지금 은 세대 가 바 뀌 고 방법 이 바 뀌 었 습 니 다.여기 서 알 수 있 듯 이 웹 전단 의 변화 가 너무 빨 라 서 1,2 년 동안 공부 하지 않 으 면 당신 의 인식 을 완전히 전복 시 킬 수 있 습 니 다. type:script 을 만 들 수 없다 는 것 은 아 닙 니 다.잘못 보고 하지 않 지만 기본 값 은 react 프로젝트 입 니 다.type:script 의 내용 을 포함 하지 않 습 니 다.
    또한,이러한 방식 으로 프로젝트 를 만 들 고 공식 문 서 는 create-react-app 도 구 를 전역 적 으로 설치 하지 않 는 것 을 추천 합 니 다.최신 버 전에 서 는 npx create-react-app 을 통 해 최신 react 프로젝트 를 만 들 수 있 습 니 다.전역 적 으로 create-react-app 을 설치 하고 버 전 은 최신 이 아 닙 니 다.오래된 버 전의 react 프로젝트 를 만 들 가능성 이 높 습 니 다.설치 되 어 있 으 면 npm uninstall-g create-react-app 를 직접 마 운 트 해제 할 수 있 습 니 다.
    2.react 프로젝트 를 바탕 으로 type:script 과 관련 된 의존 도 를 직접 가입 하면 됩 니 다.

npm install typescript @types/react --save

    기본 react 항목 을 만 들 기 시작 합 니 다:
     
    명령 에 저 는--typescript 을 직접 추 가 했 습 니 다.이것 이 바로 제 가 앞에서 말 한 것 입 니 다.원래 이런 방식 으로 만 들 었 지만 지금 은 이런 방식 으로 만 들 수 없습니다.그러나 이것 도 틀 리 지 않 습 니 다.기본 적 으로 만 든 것 은 react 프로젝트 입 니 다.사용 하 는 모델 은 cra-template 입 니 다.
    
    우 리 는 type:script 의 의존 도 를 직접 추가 합 니 다.
    
    사실은 이렇게 추가 하면 tsconfig.json 파일 을 추가 하지 않 아 도 됩 니 다.마치 우리 가 직접 의존 을 증가 하고 프로젝트 에 대해 큰 수정 을 하지 않 은 것 과 같 습 니 다.
    index.js,App.js 파일 을 index.tsx,App.tsx 로 수정 한 후에 npm start 또는 yarn start 는 기본적으로 파일 tsconfig.json 을 만 들 것 입 니 다.이것 도 공식 적 으로 명확 하 게 설명 한 것 입 니 다.우 리 는 수 동 으로 tsconfig.json 을 만 들 필요 가 없습니다. 
    
    기본 으로 생 성 된 tsconfig.json 파일 의 내용 도 볼 수 있 습 니 다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

    사실 수 동 으로 만 드 는 것 도 이 모양 이 므 로 직접 만 드 는 것 이 좋 습 니 다. 
여기 서 React+TypeScript 프로젝트 구축 사례 에 대한 설명 은 여기까지 입 니 다.더 많은 React+TypeScript 프로젝트 구축 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 지원 바 랍 니 다!