Implicit generic type on slot children

[spladug]

Hi, I have a parent/child pair of generic components (DataTable<T> and DataTableColumn<T>) where I want to tie the type parameter together implicitly when the child is used in a slot, like so:

<DataTable :data="arrayOfT">
  <DataTableColumn>
    <template #body="{ row }">
      {{ row.someFieldOnTypeT }}
    </template>
  </DataTableColumn>
</DataTable>

where DataTable looks like:

<script lang="ts" setup generic="T">
defineProps<{
  data: T[]
}>()

// ... provide stuff for taking column registrations from the children ...
</script>

<template>
  <!-- ... -->
  <tr v-for="row in data"  ...>
    <td v-for="col in columns" ...>
      <component :is="col.body" :row="row" />
    </td>
  </tr>
  <!-- ... -->
</template>

and DataTableColumn is:

<script lang="ts" setup generic="T">
// .. inject stuff for registering with the parent ...
defineSlots<{
  body: (ctx: { row: T }) => any,
}>()
</script>

<template></template>

I want the type of row to be inferred from the type of :data so I can get proper typechecking in templates for usage of the row type.

I saw #8015 and it seems like a similar use case, but the best I figured out was to put <!-- @vue-generic {MyArrayElementType} --> before each DataTableColumn definition which is pretty unfortunate. I've also tried changing the defineSlots() definition to have return types other than any to no success.

I'm using Vue 3.5.13 and vue-tsc 2.2.2.

Is there a way to infer the type through automatically?

[trtajim]

I don't think this is currently something Vue's type system can infer automatically.

The generic parameter for DataTable<T> is inferred from the data prop, but DataTableColumn<T> is a separate generic component. Although it's nested in the slot, the language server doesn't propagate the parent's inferred T into the child's generic parameter.

In other words, these are inferred independently:

<DataTable<T>>
  <DataTableColumn<U>>

There isn't currently a mechanism that says "infer U from the parent component's inferred T."

That's why @vue-generic works—it explicitly tells the language service what T should be for that component instance.

Unfortunately, I don't think defineSlots() can help here either. It controls the slot types exposed by DataTableColumn, but it doesn't participate in generic inference between separate component instances.

Possible alternatives

• Continue using @vue-generic (probably the most straightforward today).
• Move the column definitions into the parent component's API instead of separate generic child components. Since everything stays within DataTable<T>, T can be inferred once and reused.
• Expose a typed helper/composable (similar to how TanStack Table builds typed column definitions) so the generic is captured before rendering.

I believe this is more of a current limitation of Vue's language tooling (Volar / vue-tsc) than something you're doing incorrectly. Until generic inference across parent/child SFC boundaries is supported, I don't think there's a way to have DataTableColumn automatically inherit DataTable's inferred T without an explicit annotation.

[murilolivorato]

<script lang="ts" setup generic="T extends Record<string, any>">
defineProps<{ data: T[]; columns: { key: keyof T & string; label: string }[] }>()
defineSlots
  { [K in keyof T as `cell-${K & string}`]?: (ctx: { row: T; value: T[K] }) => any }
>()
</script>
vue
<DataTable :data="users" :columns="cols">
  <template #cell-name="{ row }">{{ row.name }}</template>
</DataTable>

// typedTable.ts
import DataTable from './DataTable.vue'
import DataTableColumn from './DataTableColumn.vue'

export function useTypedTable<Row>() {
  return {
    DataTable: DataTable as typeof DataTable<Row>,
    Column: DataTableColumn as typeof DataTableColumn<Row>,
  }
}
vue
<script setup lang="ts">
const { DataTable, Column } = useTypedTable<User>()
</script>

<template>
  <DataTable :data="users">
    <Column><template #body="{ row }">{{ row.name }}</template></Column>
    <Column><template #body="{ row }">{{ row.email }}</template></Column>
  </DataTable>
</template>

type ColumnFor<Row> = new () => {
  $props: Record<string, never>
  $slots: { body?: (ctx: { row: Row }) => any }
}
export const Column = DataTableColumn as unknown as ColumnFor<Row>