How to stored different typed functions under the same object key?

Question

I store values and individual typed functions in an array of objects. When looping the array all the types of all typed functions in the array are required for any value. How can I write it more specific?

ts playground

TS ERROR

Argument of type 'boolean | string[]' is not assignable to parameter of type 'string[] & boolean'.

Type 'false' is not assignable to type 'string[] & boolean'.

const arrayToString = (arg: string[]): string => arg.join(", ")
const booleanToString = (arg:boolean): string => (arg ? "yes" : "no")

const data = [{
  value: true,
  render: booleanToString
  },
  {
    value: ["a","b"],
    render: arrayToString
  }
]

data.map(item =>{
  item.render(item.value) // ts error
})

Does this answer your question? [When declaring an array of generic items, how can I allow the generic parameter be inferred?](https://stackoverflow.com/questions/69909166/when-declaring-an-array-of-generic-items-how-can-i-allow-the-generic-parameter) — nullptr, Jun 29 '22 at 15:47

score 2 · Accepted Answer · answered Jun 29 '22 at 23:48

This is a shortcoming of Typescript and a design limitation. It correctly types item.value as boolean | string[] and conversely it correctly types item.render as typeof arrayToString | typeof booleanToString. However, in order to ensure type-safety, Typescript doesn't know which function it is, so to guarantee it will not error on either, it intersects the parameters, hence boolean & string[]. The intersection of these two primitives is never. This is because Typescript types doesn't have iterable discrimination.

A possible workaround is to cast it as never

data.map(({value, render}) =>{
  render(value as never);
})

My recommendation (if you are setting data this way) is to create a type to ensure that render always accepts the associated value as parameters

type ObjectWithRender<T> = {
  value: T
  render: (arg: T) => string
}

const data: [
  ObjectWithRender<boolean>,
  ObjectWithRender<[string, string]>
] = [
  {
    value: true,
    render: booleanToString
  },
  {
    value: ["a","b"],
    render: arrayToString
  }
]

Or alternatively create a helper function to infer value and renderValue... But this carries some downsides, namely your functions will now have to accept readonly args. It'll also affect compilation-to-runtime with an effectively useless function.

function validateData<T extends ReadonlyArray<any>>(data: {
  [K in keyof T]: {
    value: T[K]
    render: (arg: T[K]) => string
  }
}
) {return data}

// Will throw an error if value isn't the render arg
const validatedData = validateData(
  [
    {
      value: true,
      render: booleanToString
    },
    {
      value: ['a', 'b'],
      render: arrayToString
    }
  ] as const
)

View on TS Playground

score 0 · Answer 2 · answered Jun 29 '22 at 20:30

One way around this is by declaring the argument as an intersect type:

render(item.value as boolean & string[]) // no error

This tells the compiler to accept both types. It works much like polymorphic behavior because the type includes both possibilities.

How to stored different typed functions under the same object key?

2 Answers2