기존 create-react-app 앱에 TypeScript 추가

기존 create-react-app 앱에 TypeScript 추가

기존 create-react-app 응용 프로그램에 TypeScript를 추가하는 데 문제가 있습니다.이전에는 프로젝트를 시작하기 전에 항상 추가해 왔습니다.단순히 다음과 같습니다.create-react-app my-app --scripts-version=react-scripts-ts근데 지금은 안 돼요.

여기서 찾은 유일한 "솔루션"은 다음과 같습니다.

1. 임시 프로젝트 생성:react-scripts-ts
2. 알았다.tsconfig.json,tsconfig.test.json,tslint.json임시 프로젝트 src 폴더에서 프로젝트의src폴더입니다.
3. 인package.json에 대한 모든 참조를 변경합니다.react-scripts로.react-scripts-ts를 참조해 주세요.

이것은 이상한 회피책으로 생각되며 효율적이지 않습니다.이것보다 더 좋은 방법으로 추가할 수 있는지 아는 사람 있나요?

react-scripts 2.10부터는 기존 프로젝트에 TypeScript를 추가하거나 새 프로젝트를 생성할 때 TypeScript를 추가할 수 있습니다.

기존 프로젝트

yarn add typescript @types/node @types/react @types/react-dom @types/jest --dev

...그러면 이름을 변경해 주세요..js파일링하다.tsx

신규 프로젝트

yarn create react-app my-app --template typescript

자세한 내용은 문서를 참조하십시오.

문제가 있는 경우 문서의 문제 해결 섹션에서 다음을 참조하십시오.

트러블 슈팅

프로젝트가 TypeScript를 사용하도록 설정된 상태로 생성되지 않은 경우 npx가 캐시된 버전의 create-react-app을 사용하고 있을 수 있습니다.npm uninstall -g create-react-app 또는 yarn global remove create-react-app을 사용하여 이전에 설치된 버전을 삭제합니다(#6119 참조).

기존 리액트 앱에 TypeScript를 추가하려면 아래 명령을 사용합니다.

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

하나 이상의 파일 이름 바꾸기js/jsx로..ts/tsx예를 들어, 이름을 변경합니다.index.js로.index.ts또는index.tsx서버를 기동합니다.이렇게 하면tsconfig.json자동으로 파일을 작성하면 TypeScript에 React를 쓸 수 있습니다.

다음 명령 중 하나를 사용하여 기존 프로젝트에 유형 스크립트를 추가할 수 있습니다.

기존 Create React App 프로젝트에 TypeScript를 추가하려면 먼저 다음을 설치하십시오.

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

또는

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

자세한 내용은 이쪽에서 보실 수 있습니다.

그러나 문제는 index.js 이외의 파일을 변경하는 경우입니다.App.js로.App.tsxmodule not found error가 '.App'을 해결할 수 없다는 오류가 나타납니다.이 문제의 원인에는 tsconfig.json 파일이 없습니다.따라서 오류를 생성하면 오류가 제거됩니다.다음 tsconfig 사용을 권장합니다.

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

최근 유형 스크립트를 추가하는 풀 요청이 있습니다.아직 병합되지 않았습니다.

또한 CRA의 다음 메이저버전은 타입 스크립트를 지원하는 Babel 7로 업그레이드됩니다.

그러니 몇 주 정도 기다리시는 게 좋을 것 같아요.그러면 모든 CRA 프로젝트에 TS를 추가하는 것이 매우 쉬울 것입니다.

이 답변은 작성 시점에서는 최선의 선택이었지만, 현재는 CRA에 TS 지원이 내장되어 있습니다.상위 답변을 참조하십시오.이것은 역사적인 목적으로 간직하겠습니다.

---

react-app-rewired를 사용하여 프로젝트의 웹 팩 구성에 타이프스크립트를 추가할 수 있습니다.이는 꺼내기보다 더 나은 방법입니다.

여기서 타이프스크립트를 추가하는 방법을 잘 모르는 경우는, 다음의 가이드에서 타이프스크립트를 추가하는 방법을 설명합니다.

기존 create-react-app 프로젝트에서 typescript를 추가하기로 결정하면 아무 것도 작동하지 않습니다.마지막으로, 저는 타이프 스크립트 템플릿을 사용하여 새로운 일회용 어플리케이션을 만들고 아래의 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, Tailwind, Storybook을 사용하여 템플릿을 만들었습니다.

https://github.com/dsilva2401/react-typecript-tailwind-storybook

TypeScript를 사용하여 새로운 Create React App 프로젝트를 시작하려면 다음을 수행합니다.

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

언급URL : https://stackoverflow.com/questions/48967495/adding-typescript-to-existing-create-react-app-app