Home React + Typescript: How can I dynamically set a generic interface for a function?

Questions

React + Typescript: How can I dynamically set a generic interface for a function?

June 16, 2022

Consider the following components:

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} />
  )
}

I need the onPropertySelect’s (in Basic.tsx) type to equal whatever type is passed into it in Extended.tsx. i.e. onPropertySelect in Basic should know the type to use is (property: BasicPropertyDetails<ExtendedPropertyDetails>) => void (based on the value in Extended.tsx).

Note: The type of property inside onPropertySelect will have the same subtype as BasicPropertyDetails<unknown>

As of now I cannot get the above to work and the implementation (or the return tsx) in Extended throws an error for types not matching.

>Solution :

In Extended.tsx, pass type T to onPropertySelect property.

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