reactjs - 如何使用 Typescript 正确声明 React 包装器组件 (HOC) 的类型

Question

我正在尝试实现一个简单的 HOC，用于使用自定义工具提示增强组件。尽管代码运行良好，但我无法弄清楚如何正确声明类型。
我的 HOC 的简化版本如下所示:

const withTooltip = <P extends {}>(
  BaseComponent: React.ComponentType<P>
): React.FC<P & { title?: string }> => ({ title, ...rest }) => {
  
  return (
    <>
      <BaseComponent {...rest} />
      <Tooltip title={title}/>
    </>
  );
};

但我收到 typescript 错误:

Type 'Omit<PropsWithChildren<P & { title?: string | undefined; }>, "title">' is not assignable to type 'IntrinsicAttributes & P & { children?: ReactNode; }'.
  Type 'Omit<PropsWithChildren<P & { title?: string | undefined; }>, "title">' is not assignable to type 'P'.
    'Omit<PropsWithChildren<P & { title?: string | undefined; }>, "title">' is assignable to the constraint of type 'P', but 'P' could be instantiated with a different subtype of constraint '{}'.

如何为这样的 HOC 正确声明类型？

Answer 1

您需要使用推断的类型 rest Prop :

import React, { ComponentType } from 'react'

const Tooltip = (props: { title?: string }) => null

type OptionalTitle = { title?: string };

const withTooltip = <P extends object = object>(
  BaseComponent: ComponentType<Omit<P & OptionalTitle, "title">>
): React.FC<P & OptionalTitle> => ({ title, ...rest }) => {

  return (
    <>
      <BaseComponent {...rest} />
      <Tooltip title={title} />
    </>
  );
};