React中为AsyncComponentLoader实现基于load方法的组件Props类型自动推导

我之前正好折腾过类似的类型推导需求，用TypeScript的条件类型和infer关键字完全能搞定，而且还能完美支持你要的fallback逻辑。下面给你一步步拆解实现方案：

首先，我们需要先定义几个工具类型来帮我们提取和推导类型，这些工具类型是实现自动推导的核心：

// 工具类型1：拆开Promise类型，获取其最终解析的类型
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

// 工具类型2：从组件类型中提取它的Props，匹配不到则返回fallback的任意对象类型
type GetComponentProps<T> = 
  T extends React.ComponentType<infer P> 
    ? P 
    : { [key: string]: any };

接下来，我们重新定义AsyncComponentLoader的Props类型，这次我们让它自动从load函数的返回值里推导组件Props：

// 定义组件的Props类型：自动从load函数的返回值提取组件Props
type AsyncComponentLoaderProps<L extends () => Promise<any>> = 
  GetComponentProps<UnwrapPromise<ReturnType<L>>> & {
    load: L;
  };

然后是组件类的定义，这里我们把泛型参数绑定到load函数的类型上，让TypeScript自动推导：

export default class AsyncComponentLoader<L extends () => Promise<any>> 
  extends React.PureComponent<AsyncComponentLoaderProps<L>> {
  // 你的组件实现逻辑不变，这里省略...
}

为什么这个方案能满足你的需求？ #

• 自动推导Props：当你使用AsyncComponentLoader时，只要传入load函数（比如() => import('./MyComponent')），TypeScript会自动从MyComponent的默认导出类型中提取它的Props，完全不需要手动指定泛型参数。
• 支持fallback逻辑：如果load函数返回的是Promise<any>（或者TypeScript无法解析出具体组件类型的情况），GetComponentProps会自动 fallback 到{ [key: string]: any }，和你最初的需求完全一致。

给你两个实际使用的例子验证效果： #

例子1：明确的组件类型推导

假设你有一个Button组件，它的Props是{ label: string; disabled?: boolean }，使用时：

<AsyncComponentLoader
  load={() => import('./Button')}
  label="Click Me"
  disabled={false}
/>

这时候TypeScript会自动校验label和disabled的类型，完全不需要手动传入<AsyncComponentLoader<{ label: string; disabled?: boolean }>>。

例子2：fallback到任意对象类型

如果load返回的是Promise<any>，TypeScript会允许你传入任意props：

<AsyncComponentLoader
  load={() => Promise.resolve({ default: () => <div>Hello</div> })}
  anyProp="whatever"
  anotherProp={123}
/>

这种情况下，TypeScript不会对anyProp和anotherProp做类型校验，和你最初的实现逻辑一致。

补充说明 #

这个方案的核心是利用ReturnType<L>获取load函数的返回类型，再通过UnwrapPromise拆开Promise拿到组件类型，最后用GetComponentProps提取组件Props。整个过程完全由TypeScript自动推导，不需要开发者手动干预，完美解决了你之前需要显式传泛型的问题。

内容来源于stack exchange