reactjs 将TypeScript添加到现有的create-react-app应用程序

zu0ti5jz  于 2022-12-03  发布在  React
关注(0)|答案(7)|浏览(144)

我在将TypeScript添加到一个已经存在的create-react-app应用程序时遇到了困难。以前我总是在启动项目之前添加它,简单地通过create-react-app my-app --scripts-version=react-scripts-ts,但现在不起作用了。
我找到的唯一“解决方案”here是:
1.使用react-scripts-ts创建临时项目
1.将tsconfig.jsontsconfig.test.jsontslint.json从临时项目src文件夹复制到项目的src文件夹。
1.在package.json中,将脚本部分中对react-scripts的所有引用更改为react-scripts-ts
这只是看起来像一个奇怪的变通方案,不是很有效。有人知道是否有可能以一种更好的方式添加它吗?

qxsslcnc

qxsslcnc1#

从react-scripts 2.10开始,您可以将TypeScript添加到现有项目或在创建新项目时添加。

现有项目

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

...然后将.js文件重命名为.tsx

新项目

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

你可以阅读更多的in the docs
如果您遇到问题,文档的故障排除部分中的以下内容可能会有所帮助:

疑难排解

如果您的项目不是在启用TypeScript的情况下创建的,npx可能使用了create-react-app的缓存版本。使用npm uninstall -g create-react-app或yarn global remove create-react-app删除以前安装的版本(请参见#6119)。

uwopmtnx

uwopmtnx2#

如果要将TypeScript添加到现有的react应用程序,请使用以下命令

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

将至少一个文件从js/jsx重命名为.ts/tsx。例如,将index.js重命名为index.tsindex.tsx,然后启动服务器。这将自动生成tsconfig.json文件,您就可以在TypeScript中编写React了。

mi7gmzs6

mi7gmzs63#

您可以使用下列其中一个命令,将 typescript 加入现有的项目:
要将TypeScript添加到现有的Create React App项目,请先安装它:

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

您可以阅读更多here
但问题是,当你改变一个文件,除了index.js,如App.jsApp.tsx,它给你一个错误,模块找不到错误不能解决'./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"
  ]
}
ffscu2ro

ffscu2ro4#

a recent pull request adding Typescript。它还没有合并。
此外,CRA的下一个主要版本将升级到Babel 7,它支持Typescript。
所以我建议你再等几个星期,到时候在CRA项目中加入TS应该会很容易。

ar7v8xwq

ar7v8xwq5#

在撰写本文时,这个答案是最好的选择,但现在CRA有内置的TS支持。See the top answer.我将保留它以备将来使用。
您可以使用react-app-rewired将typescript添加到项目的webpack配置中,这是一个比弹出更好的选择。
如果您不确定如何从此处添加打印脚本,here's a guide on how to do that.

ssm49v7z

ssm49v7z6#

如果决定在现有的create-react-app项目中添加typescript,一切都不起作用。最后,我使用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"
  ]
}
mi7gmzs6

mi7gmzs67#

要使用TypeScript启动新的Create React App项目,可以运行:

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

相关问题