React + Typescript:如何动态设置函数的泛型接口?

Question

考虑以下组件:

Basic.tsx

type BasicPropertyDetails<T extends unknown> = T & {
label: string
id: string
}
interface Props {
properties: BasicPropertyDetails<unknown>[]
onPropertySelect: <T>(property: BasicPropertyDetails<T>) => void
}
const Basic = ({ properties, onPropertySelect }: Props) => { ... }

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 (
<Basic properties={ExtraProperties} onPropertySelect={onPropertySelect} />
)
}

我需要onPropertySelect的(在Basic.tsx)类型等于在Extended.tsx传递给它的任何类型。即Basic中的onPropertySelect应该知道要使用的类型是(property: BasicPropertyDetails<ExtendedPropertyDetails>) => void(基于Extended.tsx中的值)。

注意:onPropertySelect中的property类型将与BasicPropertyDetails<unknown>具有相同的子类型

到目前为止，我无法使上述工作，并且扩展中的实现(或返回tsx)会因类型不匹配而抛出错误。

Answer 1

在Extended.tsx中，将T类型传递给onPropertySelect属性

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