reactjs - Typescript - 返回泛型函数的函数 - 它有什么作用？

Question

我是 TypeScript 的新手，遇到了一段让我困惑不已的代码。我试图了解函数 componentControl 是什么确实在下面，但我认为我没有完全理解它。

componentControl:

const componentControl: <P extends object>(
  options: BaseProps<P>
) => React.FunctionComponent<P> = <P extends object>(options: BaseProps<P>) => {
  const defaultBaseProps = {
    onInit: () => Promise.resolve(),
    onLoading: () => Promise.resolve(),
    onLoaded: () => Promise.resolve(),
    onSubmit: () => Promise.resolve(),
    onSubmitSuccess: () => Promise.resolve(),
    onDestroy: undefined,
    onError: () => Promise.resolve(),
    onLoadingFailure: () => Promise.resolve(),
    onSubmitFailure: () => Promise.resolve(),
    InitComponent: () => <PageSpinner />,
    LoadingComponent: () => <PageSpinner />,
    LoadedComponent: () => <h1>The component has been loaded.</h1>,
    SubmittingComponent: () => <PageSpinner />,
    SubmitSuccessComponent: () => <h1>Submitted successfully.</h1>,
    ErrorComponent: DefaultErrorComponent,
    LoadingFailureComponent: DefaultErrorComponent,
    SubmitFailureComponent: DefaultErrorComponent,
  };
  return (wrapped: P) => {
    const props: BaseComponentProps<P> = {
      base: { ...defaultBaseProps, ...options },
      wrapped: wrapped
    };
    return <BaseComponent {...props} />;
  };
};

BaseProps:

export interface BaseProps<P> {
  onInit?: (props: P & BaseContextType) => Promise<void>;
  onLoading?: (props: P & BaseContextType) => Promise<void>;
  onLoaded?: (props: P & BaseContextType) => Promise<void>;
  onSubmit?: (
    props: P & BaseContextType & { submittedData: unknown }
  ) => Promise<void>;
  onSubmitSuccess?: (props: P & BaseContextType) => Promise<void>;
  onDestroy?: (props: P & BaseContextType) => Promise<void>;
  onError?: (
    props: { err: Error | string | unknown } & BaseContextType
  ) => Promise<void>;
  onLoadingFailure?: (
    props: { err: Error | string | unknown } & BaseContextType
  ) => Promise<void>;
  onSubmitFailure?: (
    props: { err: Error | string | unknown } & BaseContextType
  ) => Promise<void>;

  InitComponent?: React.FunctionComponent<P>;
  LoadingComponent?: React.FunctionComponent<P>;
  LoadedComponent?: React.FunctionComponent<P>;
  SubmittingComponent?: React.FunctionComponent<P>;
  SubmitSuccessComponent?: React.FunctionComponent<P>;
  ErrorComponent?: React.FunctionComponent<
    P & { err: Error | string | unknown }
  >;
  LoadingFailureComponent?: React.FunctionComponent<
    P & { err: Error | string | unknown }
  >;
  SubmitFailureComponent?: React.FunctionComponent<
    P & { err: Error | string | unknown }
  >;
}

BaseComponentProps:

export interface BaseComponentProps<P> {
  base: BaseProps<P>;
  wrapped: P;
}

如果我将鼠标悬停在函数名称上 componentControl在 IntelliJ 中，它显示为:export default function componentControl<P>(options: BaseProps<P>): (wrapped: P) => JSX.Element .这个函数的输入到底是什么？是options吗类型 BaseProps或 wrapped类型 P ？ wrapped有什么用？这个函数是否返回下面这个函数？

(wrapped: P) => {
    const props: BaseComponentProps<P> = {
      base: { ...defaultBaseProps, ...options },
      wrapped: wrapped
    };
    return <BaseComponent {...props} />;
  };

最后，我该如何使用/调用这个函数？非常感谢您的阅读。

Answer 1

让我们一步步来:

1. 这个函数的输入到底是什么？:这个函数的输入/参数 ( componentControl ) 它是一个 options 对象(它应该遵循 BaseProps 接口(interface)中指定的约束。熊请记住，您还需要发送通用类型 P 的值，在我的示例中是 {someProp: boolean} 接口(interface)。这将告诉您的组件 P 的值是该接口(interface)，因此如果您尝试将 onInit 函数作为 props 发送，它不会将 {someProp: boolean} 作为参数类型，它将返回错误。此约束在此处的 BaseProps 接口(interface)中定义 onInit?: (props: P & BaseContextType) => Promise<void>;，其中 P === {someProp: boolean} 在我的示例中。

2. 是 BaseProps 类型的选项还是 P 类型的包装？:正如我所说，该函数的参数是 options 对象。

3. wrapped 有什么用？:函数 componentControl 返回一个功能组件(如您在第 3 行看到的那样，它的类型为 ) => React.FunctionComponent<P>。所以如果您这样做:

const NewControledComponent = componentControl<{someProp: boolean}>({onInit}) // P === {someProp}

<NewControledComponent someProp={false} /> // wrapped === props === {someProp: false}

wrapped 只是用于引用组件属性的名称(称它们为 props 或 wrappedComponentProps 会更准确。

1. And do this function returns this function below?:是的，它返回下面的函数，这意味着它是一个 React Functional Component

2. 我应该如何使用/调用这个函数？:就像一个普通函数，但你需要记住它会返回一个 React 函数式组件。