Skip to main content

添加 TypeScript

注意：react-scripts@2.1.0 及更高版本提供此功能。

¥Note: this feature is available with react-scripts@2.1.0 and higher.

TypeScript 是 JavaScript 的类型化超集，可编译为纯 JavaScript。

¥TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

安装​

¥Installation

要使用 TypeScript 启动一个新的 Create React App 项目，你可以运行：

¥To start a new Create React App project with TypeScript, you can run:

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

或者

¥or

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

如果你之前通过 npm install -g create-react-app 全局安装了 create-react-app，我们建议你使用 npm uninstall -g create-react-app 或 yarn global remove create-react-app 卸载软件包，以确保 npx 始终使用最新版本。

¥If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-app to ensure that npx always uses the latest version.

不再支持 create-react-app 的全局安装。

¥Global installs of create-react-app are no longer supported.

要将 TypeScript 添加到现有的 Create React App 项目中，首先安装它：

¥To add TypeScript to an existing Create React App project, first install it:

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

或者

¥or

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

接下来，将任何文件重命名为 TypeScript 文件（例如 src/index.js 到 src/index.tsx），如果它不在项目 tsconfig.json file 的根目录中，则创建 tsconfig.json。

¥Next, rename any file to be a TypeScript file (e.g. src/index.js to src/index.tsx) and create tsconfig.json if it's not in the root of your project tsconfig.json file.

最后重新启动你的开发服务器！

¥Finally restart your development server!

类型错误将显示在与构建版本相同的控制台中。在继续开发或构建项目之前，你必须修复这些类型错误。对于高级配置，看这里。

¥Type errors will show up in the same console as the build one. You'll have to fix these type errors before you continue development or build your project. For advanced configuration, see here.

开始使用 TypeScript 和 React​

¥Getting Started with TypeScript and React

你不需要制作 tsconfig.json file，将为你制作一个。你可以编辑生成的 TypeScript 配置。

¥You are not required to make a tsconfig.json file, one will be made for you. You are allowed to edit the generated TypeScript configuration.

故障排除​

¥Troubleshooting

如果你的项目不是在启用 TypeScript 的情况下创建的，则 npx 可能正在使用 create-react-app 的缓存版本。使用 npm uninstall -g create-react-app 或 yarn global remove create-react-app 删除以前安装的版本（请参阅 #6119）。

¥If your project is not created with TypeScript enabled, npx may be using a cached version of create-react-app. Remove previously installed versions with npm uninstall -g create-react-app or yarn global remove create-react-app (see #6119).

如果你当前正在使用 create-react-app-typescript，请参阅 这篇博文 以获取有关如何迁移到 Create React App 的说明。

¥If you are currently using create-react-app-typescript, see this blog post for instructions on how to migrate to Create React App.

不支持常量枚举和命名空间，你可以了解 使用带有 TypeScript 的 Babel 的约束。

¥Constant enums and namespaces are not supported, you can learn about the constraints of using Babel with TypeScript here.