如何添加 TypeScript 到 Create React App

Create React App 是一个帮助快速构建 React 应用的脚手架工具。在开发 React 应用时，我们常常会使用 TypeScript 来提供代码的类型检查和更好的 IDE 支持。这篇文章将会介绍如何将 TypeScript 集成到 Create React App 中。

第一步：创建 React 应用

在开始之前，我们需要使用 Create React App 创建一个 React 应用。如果你已经有了一个现有的项目，可以跳过这一步。

npx create-react-app my-app
cd my-app
npm start

这段代码将会创建一个新的 React 应用并启动开发服务器。你可以通过访问 http://localhost:3000 来查看你的应用是否能够正常运行。

第二步：安装 TypeScript 相关的依赖

在我们开始添加 TypeScript 之前，需要先安装相关的依赖。

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

• typescript 是 TypeScript 编译器。
• @types/node 和 @types/jest 用于提供 Node.js 和 Jest 的类型定义。
• @types/react 和 @types/react-dom 用于提供 React 和 React DOM 的类型定义。

第三步：将文件后缀名改为 .tsx

Create React App 默认使用 .js 文件作为组件的文件后缀名，我们需要将其改为 .tsx 才能使用 TypeScript 语法。

mv src/App.js src/App.tsx

第四步：将 JavaScript 转换为 TypeScript

我们需要将原有的 JavaScript 代码转换为 TypeScript 语法。这里有两种方法来完成这个转换。

方法一：手动转换

我们可以手动将 JavaScript 代码转换为 TypeScript，这需要我们自己添加类型声明、修改函数调用等等。

方法二：使用 TypeScript 的 --allowJs 选项

TypeScript 支持通过 --allowJs 选项来编译 JavaScript 代码。我们可以使用这个选项来逐步将 JavaScript 代码转换为 TypeScript 代码。

首先，在 tsconfig.json 中添加以下配置：

{
  "compilerOptions": {
    "allowJs": true
  }
}

然后，在 .js 文件的顶部添加以下注释：

// @ts-check

这个注释将会启用 TypeScript 的语法检查和类型检查。

第五步：重启开发服务器

在完成以上步骤后，需要重启开发服务器，这样 Create React App 将会使用 TypeScript 来编译我们的代码。

npm start

总结

在这篇文章中，我们介绍了如何将 TypeScript 集成到 Create React App 中。通过使用 TypeScript，我们可以提供代码的类型检查和更好的 IDE 支持，让我们的开发更加高效。