React:如何正确键入HOC组件？

import React, { ComponentType } from 'react';

// 定义HOC组件的Props类型
interface HocProps {
  // 这里可以定义HOC组件需要的Props
}

// 定义一个HOC函数，接受一个被包裹的组件作为参数
function withHoc<T extends object>(WrappedComponent: ComponentType<T>) {
  // 返回一个新的组件
  const HocComponent: React.FC<T & HocProps> = (props) => {
    // 这里可以在HOC组件中添加额外的逻辑
    // ...

    // 渲染被包裹的组件，并传递Props
    return <WrappedComponent {...props} />;
  };

  // 设置HOC组件的显示名称，方便调试
  HocComponent.displayName = `withHoc(${WrappedComponent.displayName || WrappedComponent.name})`;

  return HocComponent;
}

// 使用HOC包裹一个组件
const MyComponent: React.FC<{ name: string }> = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

const MyComponentWithHoc = withHoc(MyComponent);

export default MyComponentWithHoc;