What is the correct way to pass through generics in this instance?

Question

I am building a reusable table component and I have an optional render property that can take "any" type but I want to be specific and not use any

so I have this:

type Column<T> = {
  index: string
  render?: (arg?: T) => JSX.Element | string
}

type Columns = Column<T>[]

but the above line doesn't work as I'm not sure how to pass in the generic here?

then when I pass in the columns later like this:

const cols = [
  {
  index: "Phone Number",
  render: renderFunction('test'),
} as Column<string>

but how do I pass the generic to type Columns = Column<T>[] this line?

I can't pass it form Columns as it might be different for each Column

Answer 1

You can use unknown there and use it like this:

type Columns = Column<unknown>[];

const columns: Columns = [{} as Column<string>, {} as Column<number>];