Generics in functions within an object

Question

I define the following interface

interface Axis {
  renderTick?: <T>(data: T) => React.ReactNode
}

And now I want to make an object that uses that interface.

interface CustomData {
  name: string
} 

const renderTick: (data: CustomData) => ReactNode = ({name}: CustomData) => (<>{name}</>)
const axis: Axis = {
  renderTick: renderTick
}

I had "Type 'T' is not assignable to type 'CustomData'" error

Were you able to solve this? I am stuck at the exact same place with nivo charts — Soumik Sur, Aug 26 '21 at 11:52

score 0 · Answer 1 · answered Nov 06 '20 at 00:22

You can use generic.

Try

interface Axis<T> {
  renderTick?: (data: T) => React.ReactNode
}

interface CustomData {
  name: string
} 

const renderTick = ({name}: CustomData) => (<>{name}</>)
const axis: Axis<CustomData> = {
  renderTick: renderTick
}

Use Axis generic T.

Generics in functions within an object

1 Answers1