使用 TypeScript 配置创建反应应用程序

在本文中，我们将介绍如何使用 TypeScript 配置创建一个反应应用程序。 TypeScript 是一个为 JavaScript 添加静态类型检查的编程语言，它是一个与 React 很好配合的语言。

第一步 - 创建 React 应用程序

要创建一个 React 应用程序，请在终端中使用 create-react-app 命令行工具，如下所示：

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

这会创建一个名为 my-app 的新目录，并且其中会包含一些默认的应用程序代码。

第二步 - 配置 TypeScript

在安装了 TypeScript 模板的情况下，您的应用程序现在已经配置了 TypeScript。接下来，您需要创建一个 tsconfig.json 文件来配置 TypeScript。

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src"]
}

在这个文件中，我们定义了编译器选项，包括：

• 目标版本 target - 我们选择了 ES5
• 库 lib - 我们选择了 dom、dom.iterable 和 esnext
• 允许 JavaScript allowJs - 我们设为 true
• 跳过库检查 skipLibCheck - 我们设为 true
• ES 模块交互 esModuleInterop - 我们设为 true
• 允许综合默认导入 allowSyntheticDefaultImports - 我们设为 true
• 严格模式 strict - 我们设为 true
• 强制一致的文件名大小写 forceConsistentCasingInFileNames - 我们设为 true
• 模块 module - 我们选择了 ESNext
• 模块解析 moduleResolution - 我们选择了 Node
• 解析 JSON 模块 resolveJsonModule - 我们设为 true
• 隔离模块 isolatedModules - 我们设为 true
• 不输出 noEmit - 我们设为 true
• JSX - 我们选择了 React

此外，我们还将 src 文件夹包含在 include 选项中。

第三步 - 重新启动开发服务器

在修改了 tsconfig.json 文件之后，您需要重新启动开发服务器。可以使用以下命令完成：

npm start

此命令将在 http://localhost:3000 上运行应用程序。

第四步 - 创建类型定义文件

最后，您可能需要创建一些类型定义文件，以便 TypeScript 能够了解您的代码中使用的库和框架。您可以使用 @types 命名空间中的预定义类型定义文件，也可以创建自己的类型定义文件。

例如，如果您想使用 Redux，您需要安装 @types/redux 和 @types/react-redux，以获取类型定义文件。

npm install @types/redux @types/react-redux --save-dev

如果您想创建自己的类型定义文件，您可以根据需要在项目中添加 .d.ts 文件，并使用 declare 关键字来声明您的类型和接口。

declare module 'my-library-name' {
    export interface MyInterface {
        // ...
    }
}

好了，到此为止，我们已经介绍了如何使用 TypeScript 配置来创建一个 React 应用程序。下次再见！