9 配置 TypeScript 环境

在前一篇文章中，我们学习了如何在 React 中使用 TypeScript，这为我们提供了类型安全和更好的开发体验。在这篇文章中，我们将专注于如何配置 TypeScript 环境，以便为我们的 React 项目打下坚实的基础。

创建 React + TypeScript 项目

首先，确保你已经安装了 Node.js 和 npm。然后，我们可以使用 Create React App 脚手架快速创建一个 React + TypeScript 项目。

打开命令行终端，输入以下命令：

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

这个命令会创建一个名为 my-app 的新项目，并配置好 TypeScript 环境。创建完成后，进入项目文件夹：

cd my-app

你会发现项目中有一个 tsconfig.json 文件，这是 TypeScript 的配置文件。

了解 tsconfig.json

tsconfig.json 文件包含 TypeScript 编译器的配置选项。下面是一个典型的 tsconfig.json 的简要介绍：

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

重要配置选项

• target: 指定 ECMAScript 目标版本，es5 是大多数浏览器支持的标准。
• lib: 指定编译时使用的库；["dom", "dom.iterable", "esnext"] 是 React 项目常用的库配置。
• strict: 启用所有类型检查选项，确保代码的严谨性。
• jsx: 指定 JSX 的生成方式，react-jsx 是 React 17+ 中引入的新特性，用于提升性能。

我们可以根据项目需求进一步调整这些配置选项。

在项目中使用 TypeScript

创建项目后，我们可以在 src 文件夹中看到一些默认的 .tsx 文件。tsx 是 TypeScript 版的 JSX 文件。你可以开始编写带有类型的组件。

以下是一个简单的示例，展示如何使用 TypeScript 创建一个函数组件：

import React from 'react';

interface GreetingProps {
  name: string;
}

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

在上面的代码中，GreetingProps 接口定义了 name 属性的类型，这样可以在组件中确保传入的 name 是一个字符串。

在项目中添加类型支持

如果你需要为项目中的 JavaScript 文件添加类型支持，可以通过以下步骤实现：

1. 创建一个 .d.ts 文件（例如 custom.d.ts）。
2. 在文件中定义你的全局类型或模块。

例如，下面的代码定义了一个全局变量类型：

// custom.d.ts
declare global {
  interface Window {
    myCustomGlobalVar: string;
  }
}

校验与编译

在配置好 TypeScript 后，项目会在开发和编译阶段为你检查类型错误。运行项目：

npm start

如果有类型错误，终端会展示错误信息，帮助你迅速定位问题。

小结

在本篇文章中，我们学习了如何配置 TypeScript 环境，以及如何创建一个简单的 React 组件并为其添加类型支持。通过此配置，我们能够享受 TypeScript 的类型安全特性，帮助我们在开发中避免潜在的错误，并提升代码质量。

在接下来的文章中，我们将深入探讨组件化开发，学习如何创建可复用的组件。请继续关注！