TypeScript union as function parameter

Question

I have an app where I use a json structure to define the columns of a table.

Each column has a key and label property and an optional transformFunc property that takes a function that transforms the data to be displayed in the column.

This is the type for Column:

type Column = {
  key: string
  label: string
  transformFunc?: (value: string | number | Date) => string
};

transformFunc either takes a string, number or Date as an argument. However, I'm not able to properly type it this way:

const col: Column = {
  key: 'date',
  label: 'Date',
  transformFunc: (value: string) => value.substring(0, 5)  // TS2322: Type '(value: string) => string' is not assignable to type '(value: string | number | Date) => string'
}

How can I solve this?

I looked into generics but I don't see how to do this.

Answer 1

In generic way

type Column<T extends string | number | Date> = {
  key: string
  label: string
  transformFunc?: (value: T) => string
};

const col: Column<string> = {
  key: 'date',
  label: 'Date',
  transformFunc: (value) => value.substring(0, 5)
}