React+TypeScript中如何动态设置函数的泛型接口

原写法的核心问题是Basic组件的Props没有做泛型绑定：

• 把onPropertySelect定义成了独立的泛型函数，和properties数组的元素类型完全脱钩
• 组件本身没有声明泛型参数，TS无法根据外部传入的props自动推导回调参数的具体类型，最终导致传参时类型不匹配。

将Basic改造为泛型组件，把扩展属性类型作为Props的通用泛型参数，强绑定properties数组元素和onPropertySelect回调参数的类型关系，TS即可根据传入值自动推导对应类型，完全满足类型一致的约束要求。

修正后代码 #

Basic.tsx #

type BasicPropertyDetails<T extends unknown> = T & {
  label: string
  id: string
}

// Props增加泛型参数，绑定两个属性的类型关联
interface BasicProps<T extends unknown> {
  properties: BasicPropertyDetails<T>[]
  onPropertySelect: (property: BasicPropertyDetails<T>) => void
}

// 声明为泛型组件
const Basic = <T extends unknown>({ properties, onPropertySelect }: BasicProps<T>) => {
  // 内部业务逻辑可正常编写，T会根据传入props自动推导
  return <>{/* 渲染逻辑 */}</>
}

Extended.tsx #

export interface ExtendedPropertyDetails{
  status: string
  price: string
}

export interface Props {
  ExtraProperties: BasicPropertyDetails<ExtendedPropertyDetails>[]
  onPropertySelect: (property: BasicPropertyDetails<ExtendedPropertyDetails>) => void
}

const Extended = ({ ExtraProperties, onPropertySelect }: Props) => { 
  // 内部业务逻辑
  return (
    // 此处传参不再报类型错误，T会自动推导为ExtendedPropertyDetails
    <Basic properties={ExtraProperties} onPropertySelect={onPropertySelect} />
  )
}

• 兼容说明：该写法支持所有BasicPropertyDetails<unknown>的子类型，后续新增其他扩展属性类型时，不需要修改Basic组件的类型定义，TS会自动完成类型匹配和推导。

校验结果：在Basic组件内部调用onPropertySelect时，参数会自动识别为当前传入的具体子类型，在Extended组件的使用场景下，参数类型就是要求的(property: BasicPropertyDetails<ExtendedPropertyDetails>) => void，可直接访问status/price/label/id字段，无类型报错。

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