React 和 TypeScript 入门

如果您是 React 开发者，您可能听说过 TypeScript，它是 JavaScript 的静态类型超集，可以构建速度更快、更强大的 React 应用。TypeScript 与 React 协同工作，可以弥补 React 的一些缺陷。TypeScript 复杂的类型系统需要一定的学习曲线，所以今天我们将带您了解入门所需的一切知识。

今天我们将讨论：

• Typescript 和 React 概述
• 如何在 React 项目中使用 Typescript
• 使用 Typescript 创建 React 项目

Typescript 与 React 概述

TypeScript 是 JavaScript 的超集，因此 JavaScript 的所有功能在 TypeScript 中均可使用。此外，TypeScript 更进一步，添加了强大的类型系统，支持代码重构、导航功能、类型检查等。这种强大的静态类型语言本身就很出色，但它也为 React 开发者提供了诸多便利。事实上，许多采用 TypeScript 的 React 开发者表示，他们无法想象没有 TypeScript 的工作会是什么样子。

为了在 React 中使用 TypeScript，我们需要了解 TypeScript 对 JavaScript 代码的作用。虽然需要完整的 TypeScript 课程才能快速上手，但让我们先看看 TypeScript 为 JavaScript 代码添加了哪些功能：

• 类型注释：允许我们为变量分配类型
• 类型推断：推断变量的数据类型
• never 类型：用于表示永远不会发生的值的类型
• 未知类型：允许我们减少使用any并创建更强类型的代码
• 交叉类型：允许我们将现有类型组合起来，形成一个包含其所基于类型的所有成员的新类型
• 联合类型：|允许我们使用管道字符组合一种新的类型形式
• 使用泛型使类型可重用
• 强类型数组
• 强类型元组
• 以及更多

有关 Typescript 的基本教程，请参阅我们的文章TypeScript 教程：学习 Typescript 的分步指南

在 React 中使用 Typescript 的好处

你可能还在想，“为什么我应该在 React.js 项目中使用 Typescript？”让我们来分析一下 Typescript 的优势，并展示它如何让前端 React 开发变得更容易。

代码建议： Typescript 会在您输入时提供建议和选项。这可以节省大量精力，并使新开发人员更容易使用您的源代码。这些代码建议可以避免浪费时间，简化团队沟通，并使您的代码库更加一致。

可读性和验证：由于 Typescript 是一个静态类型系统，您可以为变量、函数和属性添加类型，从而显著提升代码的可读性。Typescript 还可以消除 React 的 PropTypes，从而简化 React 开发。

及早发现错误并启用 IntelliSense： Typescript 最受欢迎的功能之一是它能够在错误出现时立即高亮显示。Typescript 会在您运行代码之前就显示错误，从而节省您数小时的早期修复 bug 或错误的时间。

精准的代码维护和重构：随着 React 应用代码库的增长，其阅读、共享和维护难度会越来越大。浏览这些代码库可能非常繁琐，重构代码也存在风险。Typescript 可以帮助你重构代码并避免拼写错误，从而在不改变任何行为的情况下，更轻松地进行维护和更新。

提升 JavaScript 的使用体验： Typescript 与 JavaScript 完全集成，并使用 JavaScript 开发者可用的最新功能。使用 Typescript 构建的 React 项目可以编译为可在任何浏览器上运行的 JavaScript 版本。

如何在 React 中使用 TypeScript

现在你已经了解了 TypeScript 是什么以及为什么要使用它，让我们更深入地了解一下如何使用 TypeScript 进行 React 开发。我将向你展示 TypeScript 提供的四个最佳特性，但请记住，它在 React 中还能发挥更多作用。

1. 强类型函数组件 props

在 React 中使用 Typescript 的一大优势是能够使用强类型组件 props。这意味着您可以更快地了解组件传递的内容，从而避免应用中出现错误。为了演示如何操作，我们来创建一个Hello带有简单 props 的 React 组件。

看一下下面的代码。

这里，props没有指定类型，所以 Typescript 会指定any类型。为了解决这个问题，我们为 props 使用类型注解。这可以通过常规函数或箭头函数来实现。

注意：在 React 中，函数组件是接受参数props以返回 JSX 的函数。

我们必须在代码中为 props 添加类型注释。这将定义一个whoprop。这使得Hello的 props 成为强类型的。

const Hello = (props: { who: string }) => (
  <p>Hello, {props.who}</p>
);

然而，Hello在消耗的地方仍然存在错误。

我们通过将字符串传递”Mary”到 来解决这个问题Hello。

render(<Hello who="Mary" />, rootElement);
We then shorted the `Hello` component by destructuring the `props` parameter 

const Hello = ({ who }: { who: string }) => (
  <p>Hello, {who}</p>
);

我们还可以重构我们的Hello组件，使其成为常规函数而不是箭头函数。

function Hello({ who }: Props) {
 return <p>Hello, {who}</p>;
}

2. 函数组件的强类型上下文

React 上下文是一个允许同一组件树中的多个组件共享数据的工具。这节省了工作量，因为您无需通过 props 将数据沿组件树向下传递。上下文通常用于提供主题信息（例如颜色值），以便所有组件都可以访问它。让我们看看 Typescript 如何通过推断上下文的类型来简化此操作。

TypeScript 提供了强大的类型推断工具，即使未指定类型，编译器也可以推断出类型信息。这对于强类型环境非常有用。

我们首先使用createContextReact 的功能创建一个主题。

const defaultTheme = "white";
const ThemeContext = React.createContext(defaultTheme);

现在我们有了主题，我们创建一个提供程序组件。

type Props = {
  children: React.ReactNode
};
export const ThemeProvider = ({ children }: Props) => {
    const [theme, setTheme] = React.useState(defaultTheme);

    React.useEffect(() => {
        // We'd get the theme from a web API / local storage in a real app
        // We've hardcoded the theme in our example
        const currentTheme = "lightblue";
        setTheme(currentTheme);
    }, []);

  return (
    <ThemeContext.Provider value={ theme }>
      {children}
    </ThemeContext.Provider>
  );
};

这一切做了什么？主题值保存在状态中，因此如果主题发生变化，子组件可以访问新的主题。我们还使用了 React 的useEffect钩子来获取当前主题并更新theme状态值。

然后，我们可以创建一个自定义钩子，允许我们的函数组件像这样使用上下文：

const useTheme = () => React.useContext(ThemeContext);

ThemeProvider我们可以在组件树中使用该组件。为了Header访问上下文，我们使用了useTheme钩子。

const Header = () => {
    const theme = useTheme();
    return (
        <div style={{backgroundColor: theme}}>Hello!</div>
    );
}

如果我们在创建 React 上下文时提供一个合理的默认值，就能正确推断其类型。你可以将这个基本概念扩展到更复杂的强类型上下文或强类型类组件。

3. 强类型的 React 事件处理程序

在 React 中，交互式组件用于处理事件，但是如何在强类型函数组件中实现事件处理程序呢？让我们学习如何使用 Typescript 类型推断来帮助我们。

首先看下面的代码：

此应用包含一个input应该允许用户输入搜索条件的函数，但目前用户无法输入任何内容。我们需要添加一个onChange内联事件处理程序来更新criteria状态。请注意，该参数已提供 IntelliSense e。

在 React 中，onChange事件处理程序与 JavaScript 属性 onchange 相同，但采用驼峰式大小写。

<input
  type="text"
  value={criteria}
  onChange={e => setCriteria(e.currentTarget.value)}
/>

TypeScript 已推断出类型，使内联事件处理程序成为强类型。现在，用户可以使用该事件处理程序在 中输入条件input。如果我们要创建一个命名的事件处理函数，则必须将鼠标悬停在事件处理程序属性上，以了解函数参数的类型。这一切都要感谢 TypeScript！

4. 函数组件中的强类型引用

React 的函数式组件对于编写现代 React 应用至关重要。React Hooks 使得使用 React 组件编写整个应用程序成为可能。使用 TypeScript，我们可以获取函数组件中元素的强类型引用。让我们看看它是如何实现的。

我们可以使用useRef钩子访问元素的所有属性和方法，用于命令式地调用方法。看这个例子：

const element = React.useRef(null);
// can access all the properties and methods of `element` via `element.current`

...
return (
  <SomeComponent ref={element} />
);

目前，TypeScript 会在严格模式开启时推断元素的类型，input.current否则推断。然后，我们可以通过在钩子中传递泛型类型参数来定义返回元素的类型，如下所示：nullanyuseRef

const element = React.useRef<ElementType>(null);

记住：严格模式是 React 的一个工具，我们可以用它来突出显示应用程序中的潜在问题。它会对我们的代码进行检查。

这也可以通过使用 的类组件来实现createRef。我们可以显式地将 passive 返回的元素类型定义为泛型类型参数。这确保了引用是强类型的。

React.createRef<ElementType>();

TypeScript 可以为 React 做很多事情。一般的经验法则是尽可能使所有内容都强类型化。这适用于强类型事件、类属性、类状态、带有的组件状态useState等等。

继续学习。

无需费力浏览视频或文档，即可学习 TypeScript 和 React。Educative 的文本课程易于浏览，并提供实时编程环境，让学习快速高效。

在 React 中使用 TypeScript

使用 TypeScript 创建 React 项目

使用 TypeScript 创建 React 项目有两种常见方法：使用 Create React App 或手动创建。今天，我将向您展示如何使用 Create React App 创建一个基本的 React-Typescript 项目。如果您对手动创建过程感兴趣，请查看 Educative 的课程“在 React 中使用 Typescript”，这是一个简单易懂的教程。

步骤 1：收集技术要求

要使用 Typescript 设置新的 React 应用程序，您将需要以下工具：

• Node.js 和 npm，可从Nodejs.org下载。您至少需要 5.2 版本。
• 代码编辑器。我推荐 Visual Studio Code，你可以从Code.VisualStudio下载。
• 创建 React App（CRA），您可以在此处阅读更多相关信息。

第 2 步：使用 Typescript 设置 React

Create React App (CRA) 是一个用于快速构建 React 应用程序的命令行工具。您可以使用 npx 命令将 CRA 下载为 npm 包。如果您使用 create-react-app v2.1 或更高版本创建新的 React 应用，Typescript 已内置。因此，要使用 Typescript 创建新项目，只需将其用作--typescript参数即可。

npx create-react-app hello-tsx --typescript

这将创建一个名为my-app的项目，但您可以更改其名称。需要注意的是，包含 JSX 的文件应该是一个.tsx文件，而仅包含 Typescript 代码的文件应该是一个.ts文件。

该应用的根 HTML 文件位于public文件夹中。它被称为。通过以下代码index.html行将 React 应用注入其中：index.html

ReactDOM.render(<App />, document.getElementById('root'));

这意味着根 React 组件被称为App，定义在 中App.tsx。

如果要将 TypeScript 添加到现有的 create-react-app 项目中，您需要安装 TypeScript 和所有必需的类型。查看此链接了解如何操作。

在启动服务器之前，您需要将文件重命名为.tsx或.ts。这将生成tsconfig.json文件。

步骤 3：运行应用程序

现在应用程序已准备就绪，您可以在开发模式下运行它。找到项目的根文件夹，然后start在终端中运行 npm 脚本。

cd my-app
npm start

你的根文件夹必须与你的应用同名，并且包含该package.json文件。现在，你的 React 应用已经准备好使用 TypeScript 了！

现在您已经了解了使用 TypeScript 构建 React 应用的基础知识。请记住，您也可以使用 Babel 和 Webpack 等工具手动创建项目。想要了解更多信息，请查看 Educative 的课程《在 React 中使用 TypeScript》。

资源

现在你已经对 TypeScript 是什么以及它能为你的 React 项目提供哪些功能有了基本的了解。TypeScript 还能为 React 提供更多功能。它带来的便捷和简单性远远超过了学习成本。为了帮助你快速上手，我整理了所有必要的资源，帮助你快速掌握 TypeScript 和 React。

通过实践学习

Educative 的所有在线课程都通过其独特的学习平台提供一流的行业标准学习体验。浏览 YouTube 视频或零散的课程会浪费您的时间，降低您的学习效率。请相信我们领域的专家，他们精心编写了实践性强、互动性强的课程，无需额外下载。

• 在 React 中使用 TypeScript

• 重新介绍 React：V16 及更高版本

• React 之路：使用类组件

• 学习 TypeScript：初学者完整课程

通过阅读学习

还没准备好开始学习课程？那就读读这篇文章吧！这些由领域专家撰写的文章将帮助你入门，并帮助你熟悉成功所需的基础知识。

• React 是什么？入门教程

• React 的演变：V16 及以后

• TypeScript 教程：学习 TypeScript 的分步指南

向其他开发人员学习

通过探索使用 TypeScript 和 React 的项目、文档和思考来学习。以下是一些值得参考的杰出人士。

• 官方 TypeScript 与 React 和 webpack 指南

• 使用 TypeScript 进行 React：Joe Previte 的最佳实践

• GitHub 的 TypeScript 和 React 入门模板

• Robert Cooper 的《2019 年开始使用 TypeScript》