创建react应用，并添加 TypeScript

创建应用

你的本地开发计算机上需要有 Node >= 14（但服务器上不需要）。你可以使用 nvm (macOS/Linux) 或 nvm-windows 在不同项目之间切换 Node 版本。

要创建新的应用，你可以选择以下方法之一：

npx

npx create-react-app@latest my-app

（npx 附带 npm 5.2+ 及更高版本，请参阅 旧 npm 版本的说明）

npm

npm init react-app my-app

npm init 在 npm 6+ 中可用

Yarn

yarn create react-app my-app

yarn create 适用于 Yarn 0.25+

选择模板

你现在可以选择通过将 --template [template-name]附加到创建命令来从模板启动新应用。

如果你不选择模板，我们将使用我们的基本模板创建你的项目。

模板始终以cra-template-[template-name] 格式命名，但是你只需将[template-name]提供给创建命令即可。

npx create-react-app my-app --template [template-name]
你可以通过在 npm 上搜索 “cra-模板-*” 来找到可用模板的列表。

我们的 自定义模板 文档描述了如何构建你自己的模板。

创建 TypeScript 应用

你可以使用模板启动一个新的 TypeScript 应用。要使用我们提供的 TypeScript 模板，请将 --template typescript附加到创建命令。

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

如果你已经有一个项目并想添加 TypeScript，请参阅我们的 添加 TypeScript 文档。

---

添加 TypeScript

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

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

安装

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

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

或者

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 始终使用最新版本。

要将 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

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

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