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

Question

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.

Vaibhav Nigam · Accepted Answer · 2022-06-16 09:50:19Z

1

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

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

answered Jun 16, 2022 at 9:50

Vaibhav Nigam

1,4971 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raven Over a year ago

You're awesome, thanks so much. Was totally stuck on this

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related