TypeScript泛型选择器函数参数类型适配问题

你遇到的核心问题是原有的selector定义是一个通用泛型函数，要求它能接收任意类型的参数，但你传入的函数只针对Person类型，TypeScript会判定类型不兼容。下面是两种可行的修改方式：

方式一：将组件Props定义为泛型类型 #

把ComponentProps改成泛型，让selector的参数类型依赖于这个泛型，这样组件使用时可以明确指定数据类型：

// 修改ComponentProps为泛型类型
type ComponentProps<T> = {
  selector: (row: T) => string | number
  // 其他组件属性...
}

// 使用组件时指定泛型参数为Person
<MyComponentName<Person> someProps={/* ... */} selector={(row) => row.name} />

这种方式最清晰，TypeScript能完全推断出row的类型，不会出现属性不存在的错误，同时保证selector的返回值是string | number。

方式二：给selector的参数添加泛型约束 #

如果不想让整个Props变成泛型，可以给selector的泛型参数添加约束，限定它必须是对象类型，同时允许函数针对具体对象类型实现：

type ComponentProps = {
  selector: <T extends object>(row: T) => string | number
  // 其他组件属性...
}

不过这种方式下，你在传入selector时不能显式指定row: Person（因为泛型T是由调用方决定的），可以去掉类型注解让TypeScript自动推断：

<MyComponentName someProps={/* ... */} selector={(row) => row.name} />

错误原因说明 #

• 原定义的<T>(row: T) => string | number要求函数能处理任意类型的参数（比如string、number等非对象类型），但你传入的函数只接受Person，不符合通用函数的要求，所以报错。
• 用(row: object) => row.name时，object类型没有定义name属性，TypeScript会严格检查属性存在性，因此提示错误。

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