高阶组件

React 中一个流行的模式是高阶组件模式，因此为高阶组件提供有效的类型至关重要。如果您还不了解高阶组件是什么，请务必阅读 React 关于高阶组件的文档，然后再继续。

您可以使用 React.AbstractComponent 类型来注解您的高阶组件。

简单的 HOC

让我们从最简单的 HOC 开始

1import * as React from 'react';2
3function trivialHOC<Config: {...}>(4  Component: React.AbstractComponent<Config>5): React.AbstractComponent<Config> {6  return Component;7}

这是一个基本的模板，您的 HOC 可能看起来像这样。在运行时，这个 HOC 根本不会做任何事情。让我们看看一些更复杂的例子。

注入 Props

高阶组件的一个常见用例是注入一个 prop。HOC 自动设置一个 prop 并返回一个不再需要该 prop 的组件。例如，考虑一个导航 prop。如何对它进行类型化？

要从配置中删除一个 prop，我们可以获取一个包含该 prop 的组件，并返回一个不包含该 prop 的组件。最好使用对象类型扩展来构建这些类型。

1import * as React from 'react';2
3type InjectedProps = {foo: number}4
5function injectProp<Config>(6  Component: React.AbstractComponent<{...Config, ...InjectedProps}>7): React.AbstractComponent<Config> {8  return function WrapperComponent(9    props: Config,10  ) {11    return <Component {...props} foo={42} />;12  };13}14
15function MyComponent(props: {16  a: number,17  b: number,18  ...InjectedProps,19}): React.Node {}20
21const MyEnhancedComponent = injectProp(MyComponent);22
23// We don't need to pass in `foo` even though `MyComponent` requires it:24<MyEnhancedComponent a={1} b={2} />; // OK25
26// We still require `a` and `b`:27<MyEnhancedComponent a={1} />; // ERROR

27:2-27:20: Cannot create `MyEnhancedComponent` element because property `b` is missing in props [1] but exists in object type [2]. [prop-missing]

保留组件的实例类型

回想一下，函数组件的实例类型是 void。我们上面的例子将一个组件包装在一个函数中，因此返回的组件的实例类型是 void。

1import * as React from 'react';2
3type InjectedProps = {foo: number}4
5function injectProp<Config>(6  Component: React.AbstractComponent<{...Config, ...InjectedProps}>7): React.AbstractComponent<Config> {8  return function WrapperComponent(9    props: Config,10  ) {11    return <Component {...props} foo={42} />;12  };13}14
15// A class component in this example16class MyComponent extends React.Component<{17  a: number,18  b: number,19  ...InjectedProps,20}> {}21
22const MyEnhancedComponent = injectProp(MyComponent);23
24// If we create a ref object for the component, it will never be assigned25// an instance of MyComponent!26const ref = React.createRef<MyComponent>();27
28// Error, mixed is incompatible with MyComponent.29<MyEnhancedComponent ref={ref} a={1} b={2} />;

29:27-29:29: Cannot create `MyEnhancedComponent` element because in property `ref`: [incompatible-type] Either a call signature declaring the expected parameter / return type is missing in `React.RefObject` [1] but exists in function type [2]. Or `React.RefObject` [1] is incompatible with number [3].

我们收到此错误消息，因为 React.AbstractComponent<Config> 没有设置 Instance 类型参数，因此它被自动设置为 mixed。如果我们想保留组件的实例类型，我们可以使用 React.forwardRef

1import * as React from 'react';2
3type InjectedProps = {foo: number}4
5function injectAndPreserveInstance<Config, Instance>(6  Component: React.AbstractComponent<{...Config, ...InjectedProps}, Instance>7): React.AbstractComponent<Config, Instance> {8  return React.forwardRef<Config, Instance>((props, ref) =>9      <Component ref={ref} foo={3} {...props} />10  );11}12
13class MyComponent extends React.Component<{14  a: number,15  b: number,16  ...InjectedProps,17}> {}18
19const MyEnhancedComponent = injectAndPreserveInstance(MyComponent);20
21const ref = React.createRef<MyComponent>();22
23// All good! The ref is forwarded.24<MyEnhancedComponent ref={ref} a={1} b={2} />;

导出包装组件

如果您尝试导出一个包装组件，您很可能会遇到缺少注解的错误

1import * as React from 'react';2
3function trivialHOC<Config: {...}>(4  Component: React.AbstractComponent<Config>,5): React.AbstractComponent<Config> {6  return Component;7}8
9type Props = $ReadOnly<{bar: number, foo?: number}>;10
11function MyComponent({bar, foo = 3}: Props): React.Node {}12
13export const MyEnhancedComponent = trivialHOC(MyComponent); // ERROR

13:36-13:58: Cannot build a typed interface for this module. You should annotate the exports of this module with types. Cannot determine the type of this call expression. Please provide an annotation, e.g., by adding a type cast around this expression. [signature-verification-failure]

您可以使用 React.AbstractComponent 为您的导出组件添加注解

1import * as React from 'react';2
3function trivialHOC<Config: {...}>(4  Component: React.AbstractComponent<Config>,5): React.AbstractComponent<Config> {6  return Component;7}8
9type Props = $ReadOnly<{bar: number, foo?: number}>;10
11function MyComponent({bar, foo = 3}: Props): React.Node {}12
13export const MyEnhancedComponent: React.AbstractComponent<Props> = trivialHOC(MyComponent); // OK

简单的 HOC​

注入 Props​

保留组件的实例类型​

导出包装组件​

简单的 HOC

注入 Props

保留组件的实例类型

导出包装组件