TypeScript如何合并支持HTML元素与组件的React GetProps泛型类型

实现代码 #

import type { Component, ComponentPropsWithoutRef, ElementType } from 'react';

export type GetProps<T> = 
  // 匹配HTML标签字符串、函数组件、类组件构造函数的场景
  T extends ElementType ? ComponentPropsWithoutRef<T>
  // 匹配传入类组件实例类型的场景
  : T extends Component ? ComponentPropsWithoutRef<new () => T>
  // 不符合上述两种情况返回never兜底
  : never;

逻辑说明 #

• 第一层条件判断会匹配所有React原生支持的元素类型，包括div/span这类HTML标签字符串、函数组件、类组件构造函数，直接调用内置的ComponentPropsWithoutRef获取对应Props类型，覆盖原有GetProps<'div'>的用法。
• 第二层条件判断专门适配传入类组件实例类型的场景，先将实例类型转换为对应的构造函数类型再提取Props，覆盖原有GetProps2<Component>的用法。
• 该实现还额外支持直接传入函数组件类型获取Props的场景，兼容性更强。

用法示例 #

// 1. 传入HTML标签
type DivProps = GetProps<'div'> 
// 等价于 React.HTMLAttributes<HTMLDivElement>

// 2. 传入类组件实例类型
class MyClassComp extends Component<{ id: number; name: string }> {}
type MyClassCompProps = GetProps<MyClassComp> 
// 提取结果：{ id: number; name: string }

// 3. 额外支持传入函数组件类型
const MyFuncComp = (props: { age: number; sex?: 'male' | 'female' }) => <div />
type MyFuncCompProps = GetProps<typeof MyFuncComp>
// 提取结果：{ age: number; sex?: 'male' | 'female' }

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