如何获取定义了类型参数的React组件的Props类型

你写的 TMyComponent<number> 语法需要 TS 4.7 及以上版本支持「泛型函数类型实例化」特性才能生效，低于该版本的TS无法识别该写法。而 React.ComponentProps 本质就是提取组件函数的第一个入参类型，我们可以直接用更底层的类型语法实现需求。

方案1：TS 4.7及以上版本（推荐） #

直接通过 Parameters 工具类型提取实例化后泛型组件的第一个入参即可：

type MyDesiredType = Parameters<TMyComponent<number>>[0]
// 最终得到的类型为：{ foo: string; bar: number }

该写法和你最初的思路完全一致，只是把 React.ComponentProps 替换成了更底层的 Parameters 语法，因为部分版本的 React.ComponentProps 对泛型实例化后的函数类型兼容不佳。

方案2：兼容低版本TS #

如果你的项目TS版本低于4.7，无法直接实例化泛型函数类型，可以自定义通用工具类型实现提取：

// 定义通用工具类型，第二个参数传入你要指定的泛型类型
type ExtractGenericComponentProps<T, P> = 
  T extends <U = any>(props: infer R) => any 
    ? Omit<R, 'bar'> & { bar: P }
    : never

// 调用工具类型得到目标类型
type MyDesiredType = ExtractGenericComponentProps<TMyComponent, number>
// 最终得到的类型为：{ foo: string; bar: number }

如果需要适配更多不同props结构的泛型组件，修改工具类型中的字段映射规则即可。

内容的提问来源于stack exchange，提问作者aryzing