TypeScript 中 react 组件的返回类型

React 是一个现代 JavaScript 库，可让你为 Web 应用程序创建漂亮的 UI。越来越多的开发人员正在采用称为 TypeScript 的 JavaScript 子集。

静态类型检查可以为你的代码带来结构和秩序，并帮助你更快地检测错误。

通常，在 TypeScript 中编写 React 应用程序时，不需要为组件分配返回类型。但是，有时有必要这样做。

例如，公司范围的 linting 规则可能要求开发人员指定组件的返回类型。

本文将讨论可应用于组件的三种类型。它们是 JSX.Element、ReactNode 和 ReactElement。

我们将讨论它们之间的相似之处和不同之处。

TypeScript 中 React 组件的返回类型

如果需要为组件分配类型，可以从上面列出的三种类型中选择一种。JSX.Element、ReactNode 和 ReactElement 之间的区别很微妙但很重要。

了解每种类型将帮助你编写无错误且更准确的 TypeScript 代码。

在 TypeScript 中 ReactElement 输入

它是来自@types/react 包的接口。功能组件的 render() 函数返回 ReactElement 类型。

如果你必须为 React 中的功能组件分配一个类型，则应该是这个。

如果组件有可能返回 null，你应该使用 or ||运算符为其分配类型 ReactElement ||空值。

@types/react 包中的实际接口定义如下所示。

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
    type: T;
    props: P;
    key: Key | null;
}

你可以将 ReactElement 视为组件的原始类型。下面列出的其他类型是建立在这个基本界面之上的。

在 TypeScript 中 JSX.Element 输入

该类型的 type 和 props 设置为 any，因此定义比 ReactElement 更广泛。

它的存在是因为 React 不是唯一依赖 JSX 的库。

JSX.Element 允许其他框架在此之上定义自己的、更具体的类型。在 React 的情况下，ReactElement 是基于 JSX.Element 的更具体的类型。

如果要指定功能组件的返回类型，可以使用 ReactElement 或 JSX.Element。让我们看一下使用后者的示例。

type sampleProps = {
  someText: string;
};
const App = ({ someText }: sampleProps): JSX.Element => <p>{someText}</p>;

在 TypeScript 中 ReactNode 输入

该类型由 React 类组件的 render() 函数返回。它可以是 ReactElement、ReactFragment、ReactText、字符串、布尔值和 JavaScript 中的其他虚假值，例如 undefined 或 null。

下面是来自 @types/react 包的 ReactNode 类型的官方定义。

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;