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

Question

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

65

我在将TypeScript添加到现有的create-react-app应用程序时遇到了困难。之前，我总是在启动项目之前添加它，只需使用create-react-app my-app --scripts-version=react-scripts-ts即可。但现在不起作用了。我找到的唯一“解决方案”在这里是：

使用react-scripts-ts创建一个临时项目。
将临时项目src文件夹中的tsconfig.json、tsconfig.test.json和tslint.json复制到您项目的src文件夹中。
在package.json中，在脚本部分将所有对react-scripts的引用更改为react-scripts-ts。

这似乎只是一个奇怪的变通方法，而且效率不高。有没有人知道是否有比这更好的方法来添加TypeScript呢？

- Lydia

3

好的，以下是您需要翻译的内容：为 React 应用程序添加 TypeScriptReact 可以与多种语言和库一起使用，其中包括 TypeScript。TypeScript 是 JavaScript 的超集，它向其添加了类型检查等功能。要将 TypeScript 添加到现有的 Create React App 项目中，请运行以下命令：npm install --save typescript @types/node @types/react @types/react-dom @types/jest在安装完成后，将任何 .js 文件重命名为 .tsx 并开始使用 TypeScript。请注意，在 TypeScript 中编写 React 组件时，需要为组件及其 props 定义类型。在下面的示例中，我们定义了一个 HelloProps 类型，并在 Hello 组件中使用它：

import React from 'react';

type HelloProps = {
  name: string;
};

function Hello({ name }: HelloProps) {
  return Hello, {name}!;
}

export default Hello;

TypeScript 也可以帮助捕获其他类型错误，例如使用未定义的变量或访问不存在的属性，这些都可能会导致应用程序崩溃。因此，使用 TypeScript 可以使您的代码更加健壮和可维护。 - Blundering Philosopher

9个回答

45

如果你想将 TypeScript 添加到现有的 React 应用中，请使用以下命令

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代码。

- Joee

12

如果我重命名index.js，则不会出错，但如果我对其他文件进行重命名，则会出现以下错误：无法解析的模块未找到错误...。此外，没有生成tsconfig.json文件。 - UMR

5

@UMR，您需要手动初始化TypeScript npx tsc --init 并在tsconfig.json中设置 "jsx": "react"。 - Shubham Sharma

我仍需将TypeScript的依赖项添加到package.json中： "@types/jest": "^27.5.2", "@types/node": "^16.18.13", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.11" - Twistleton

23

您可以使用以下命令之一将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

你可以在这里阅读更多信息

但问题是，当你改变除了index.js之外的文件，例如将App.js更改为App.tsx时，它会出现模块未找到错误，无法解析 './App'。这个问题的根源是缺少一个tsconfig.json文件。因此通过创建一个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"
  ]
}

- Meisam Nazari

2

你不使用 --save，而是使用 --save-dev。 - Jimmy Kane

2

在撰写本文时，以下答案是最佳选择，但现在 CRA 已经内置了 TS 支持。请参阅顶部答案。我会将此保留作为历史记录。

您可以使用react-app-rewired将 TypeScript 添加到项目的 webpack 配置中，这比弹出式更好。

如果您不确定如何从那里添加 TypeScript，这里有一个指南。

- kingdaro

2

似乎现在不再需要弹出。 - Remi

2

最近有一个拉取请求添加了TypeScript，但还没有合并。

此外，下一个主要版本的CRA将升级到支持TypeScript的Babel 7。

因此，我建议您等待几周。然后将很容易向任何CRA项目添加TS。

- GG.

CRA 2已经发布，但似乎对Typescript的支持被推迟了：https://news.ycombinator.com/item?id=18118349 - Matt R

2

如果决定在现有的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"
  ]
}

- Parth Dave

它也没有为我生成tsconfig.json。 - Shnigi

我也曾经遇到过这个问题。之前，只有当我将src/index.js更改为src/index.tsx时，它才能正常工作。如果我更改了其他任何内容，它都会出错。我不得不自己添加一个tsconfig文件。 - user1160006

0

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

然后在根目录下创建一个tsconfig.json文件

 {
  "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"
  ]
}

- Vijay

-1

在检查了您的问题后，我使用React、Typescript、Tailwind和Storybook创建了一个模板。

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

- Diego Silva Valencia

你的回答应该告诉问题提出者如何解决问题。 - Spooky

虽然这个链接可能会回答问题，但最好在此处包含答案的基本部分并提供参考链接。只有链接的答案如果链接页面更改可能会变得无效。- [来自评论] (/ review / late-answers / 33528938) - DSDmark

-7

要使用TypeScript开始一个新的Create React App项目，您可以运行以下命令：

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

- Hamed Taheri

2

该问题字面意思是他有一个现有的项目，希望进行转换。 - Milan Velebit

哈吉，你真的不要低估自己的能力。 - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1843640 · Accepted Answer

从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

您可以在文档中了解更多信息。

如果遇到问题，文档中的故障排除部分可能会有所帮助：

故障排除

如果您的项目未启用TypeScript，则npx可能正在使用缓存的create-react-app版本。请使用npm uninstall -g create-react-app或yarn global remove create-react-app（请参见#6119）删除先前安装的版本。