Generic types + dynamic slot names

[mzgajner]

Playground with minimal reproduction

We're trying to make use of generic components introduced in Vue 3.3. We have a Table component that accepts a list of objects:

[
  { name: 'Paul',  age: 13 }, 
  { name: 'Laura', age: 45 },
]

It renders each item in the list as a table row with each property of item as a cell in that row. We're dynamically generating named slots for each cell:

<tr v-for="row in rows">
  <td v-for="(cell, columnName) in row">
    <slot :name="columnName" :value="cell">{{ cell }}</slot>
  </td>
</tr>

This allows the component consuming Table to customize how columns are rendered:

<template #age="{ value }">
  Age: {{ value }}, Allowed to drink: {{ value < 21 ? '❎' : '✅' }}
</template>

The issue we're having is that the inferred type of value in the last example is string | number, which is a union of types of all properties in the passed item(s).

Is there anything we could change so that it is automatically resolved to number based on type of row['age']?

[hello-addweb]

This will help

<template>
  <Table :rows="people">
    <template #age="{ value }">
      <!-- The line below is throwing a TS error -->
      Age: {{ value }}, Allowed to drink: {{ +value < 21 ? '❎' : '✅' }} <!-- Added + to convert it to number as <template> or any other element will convert number to string -->
    </template>
  </Table>
</template>

[mzgajner]

This solves the specific type error in that case, sure, but that's just a workaround.

I would (if possible) like to define Table in such a way that the component consuming it would receive the narrowed down type already. I.e. it should deduce that value in slot #age is the same type as people[0]['age'].

See this example - I hardcoded the types in the Table component and it works as expected. I'd like to achieve that result, but with generic types for Row in Table.vue.