从 typescript 反应中的第一个参数类型推断第二个参数类型

Question

我正在尝试制作一个实用程序 function ，它从接受不同道具集的不同反应组件创建一个新的反应组件。 我有以下代码：

function makeNewComponent(
    OldComponent: React.ComponentType<any>,
    prepareProps: () => typeof OldComponent.propTypes
): React.ComponentType {
    return function NewComponent() {
        const oldComponentProps = prepareProps();

        return <OldComponent {...oldComponentProps} />;
    };
}

但它没有正确推断prepareProps function 的返回类型。 例如，如果我像这样使用makeNewComponent function：

const OldComponent: React.FC<{ num1: number }> = () => {
    return <div>hello</div>;
};

const NewComponent = makeNewComponent(OldComponent, () => ({}));

Typescript 推断prepareProps function 的返回类型为

prepareProps: () => React.WeakValidationMap<{}> | undefined

但我需要它是这样的：

prepareProps: () => { num1: number; }

我尝试了不同的东西，但我无法让它发挥作用。 我还尝试嵌套一些函数，如下所示：

function makeNewComponent2(OldComponent: React.ComponentType<any>) {
    return function (prepareProps: () => typeof OldComponent.propTypes) {
        return function NewComponent() {
            const oldComponentProps = prepareProps();

            return <OldComponent {...oldComponentProps} />;
        };
    };
}

但它仍然无法正常工作。 有什么解决办法吗？

Answer 1

以下方法可以解决问题：

type ExtractPropTypes<T> = T extends React.WeakValidationMap<infer P> ? P : never;

function makeNewComponent<T extends React.ComponentType<any>>(
  Component: T,
  prepareProps: () => ExtractPropTypes<T['propTypes']>
): React.ComponentType {
  return function NewComponent() {
      const props = prepareProps();

      return <Component {...props} />;
  };
}