從 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} />;
  };
}