Typescript + React: Generic properties based on keys of other property object

Question

Apologies for the somewhat confusing title.

I have a React.FC (duck-typed) in a .tsx file with a generic component:

interface ITimeSeriesProps<PlotNames extends string> {

  /// map from keys to info about a plot
  plots: Record<PlotNames, Plot>,  // actual Plot type unimportant

  /// which ones to show on the plot
  show: PlotNames[]
}

const TimeSeries = <PlotNames extends string>(props: ITimeSeriesProps<PlotNames>) => {
  ...

  return <>
    ...
  </>
}

I can use it like this:

<TimeSeries<"test">
  plots = {
    test: {...}    // correctly types this key
  }
  show: ["test"]   // correctly types this entry
>
</TimeSeries>

However, I would prefer if I didn't have to specify the generic parameter <"test">, and that it was infered from the keys of the plots Record actual type. Is this possible?

MHebes · Accepted Answer · 2020-10-13 17:25:02Z

1

Figured it out. Use a Record type as the generic paramater rather than the keys by themselves:

interface ITimeSeriesProps<PlotNames extends Record<string, Plot>> {
  plots: PlotNames,
  show: (keyof PlotNames)[]
}

const TimeSeries = <PlotNames extends Record<string, Plot>>(props: ITimeSeriesProps<PlotNames>) => {
  ...
}

Usage:

<TimeSeries
  plots = {
    test: {...}    // correctly types this key
  }
  show: ["test"]   // correctly types this entry
>
</TimeSeries>

answered Oct 13, 2020 at 17:25

MHebes

3,4151 gold badge21 silver badges51 bronze badges

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

Collectives™ on Stack Overflow

Typescript + React: Generic properties based on keys of other property object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related