TypeScript - 与 React 结合使用的最佳方式

为什么选择 TypeScript？

我还有另一篇文章详细解释了 TypeScript，包括它是什么、如何使用它以及为什么应该使用它。
欢迎点击这里阅读：https://dev.to/omerwow/how-i-began-using-typescript-3noe

简而言之，使用 TypeScript 的好处包括：

在开发过程的早期发现错误。
使代码更易于理解和维护。
通过自动完成和类型检查等功能提供更好的开发体验。

入门

要使用 TypeScript 创建新的 React 应用程序，请使用以下命令：

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

就是这样，Create React App CLI 将创建一个正确配置 TypeScript 的新应用程序，您可以立即开始使用。

但是，如果您有一个现有的 React 应用想要转换为 TypeScript，则需要执行一些额外的步骤。
不过不用担心，这很简单！

首先，安装 TypeScript 和其他所需的包：

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

现在，将所有 .js 文件重命名为 .tsx 文件，并确保在继续之前重启开发服务器。
此外，重启代码编辑器/IDE 也可能需要（或有帮助）。

最后一步是创建一个 tsconfig.json 文件。
这个文件通常在创建新项目时自动创建，但由于这是一个现有项目，因此您需要自行创建。

在项目的根文件夹中，只需创建一个名为 tsconfig.json 的新文件，然后将以下内容粘贴到其中：

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

差不多就是这样了。
请注意，在现有项目中启用 TypeScript 可能会“引入”或发现一些错误。
这通常不是什么大问题，甚至可能非常有帮助，帮你解决一些 bug。你需要先处理这些问题，然后再继续开发。

现在我们有了一个可以运行的 TypeScript React 应用程序，我们可以开始利用 TypeScript 来改进我们的开发。

编写 .tsx 文件

我们将从一个简单的 React 组件开始，该组件用于渲染 header。然后，我们将使用 TypeScript 为组件添加类型和类型安全。最后，我们将 TypeScript 代码编译为 JavaScript 并运行该应用。
首先，让我们创建一个渲染 header 的简单 React 组件：

import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>Hello, world!</h1>
    </header>
  );
};

export default Header;

这个 Header 组件目前功能不多，它只是渲染一个带有“Hello, world!”文本的 header 元素。我们可以使用 TypeScript 或 JavaScript 编写这个组件。在本例中，我们将使用 TypeScript 编写。

使用 TypeScript 添加类型

现在我们有了一个基本的 React 组件，让我们用 TypeScript 添加一些类型。我们可以先为 props 和 state 添加类型：

import React from 'react';

interface HeaderProps {
  message: string;
}

const Header = (props: HeaderProps) => {
  return (
    <header>
      <h1>{props.message}</h1>
    </header>
  );
};

export default Header;

如你所见，我们为 props 添加了接口，并指定 message prop 的类型为字符串。这样，如果我们尝试将字符串以外的任何内容传递给 message prop，TypeScript 就会报错。

我们还可以为我们的状态添加类型：

import React, { useState } from 'react';

const [count, setCount] = useState<number>(0);

const Header = (props: HeaderProps) => {
  return (
    <header>
      <h1>{props.message}</h1>
      <button onClick={() => setCount(count + 1)}>
        Click me!
      </button>
      <p>You've clicked the button {count} times.</p> 
    </header>
  );
};

export default Header;

如你所见，我们为状态添加了类型，并指定 count 状态变量为数字类型。这样，如果我们尝试将 count 状态变量设置为数字以外的任何值，TypeScript 就会报错。

探索 React 事件处理程序的类型安全性

在 React 中使用 TypeScript 的一大优势是，开发者可以在事件处理程序中捕获错误。事件处理程序是 React 应用程序中响应用户输入的一种方式。当事件发生时（例如用户点击按钮），编译器会检查事件处理程序函数中每个参数的类型，还会检查函数的返回类型。如果其中任何一个参数的类型不匹配，编译器就会抛出错误。这意味着开发者可以在代码运行之前捕获事件处理程序中的错误。

然而，在 React 中使用 TypeScript 时也存在一些潜在的陷阱。其中一个陷阱是，你可能会写出有效的 TypeScript 代码，但由于 React 中的错误而无法编译。例如，请看以下代码：

class MyComponent extends React.Component {
  handleClick(event: MouseEvent) {
    // do something
  }
}

这段代码无法编译，因为 React 中存在一个错误：“handleClick” 必须声明为“MyComponent”上的静态方法。然而，这段代码是有效的 TypeScript，只有在使用 React 编译时才会出错。这意味着开发人员在编写代码时需要同时了解 TypeScript 和 React。

总而言之，TypeScript 是改进 React 代码的好方法。它可以帮助你捕获错误、优化性能，并使代码更具可读性。而且，使用起来非常有趣。

关注我们的Github 仓库，并加入我们的Discord 频道讨论！现在就在BLST
免费测试你的 API ！

文章来源：https://dev.to/omerwow/how-to-use-typescript-with-react-mn9