Invoking typed instances of child component - Composition API + TypeScript

[abalashov]

I have a generic data table component that is written in TypeScript, but no way to validate field names or types because the row record definition is defined upstream, in the non-generic parent component:

import DataTableComposable from '@js-umc2/components/data_table_composable.vue';

...
<template>
        <!-- Other stuff omitted -->

        <data-table-composable 
            :data="tenants" 
            :headers="[{ field: 'domain', display: 'Domain' }, { field: 'active', display: 'Active' }]"
            :clickable-rows="true"
            @row-clicked="onRowClick($event)">
</template>

<script lang="ts" setup>
interface TenantRecord {
    id?: number,
    domain: string;
};

const tenants = ref<Array<TenantRecord>>([]);
</script>

Anyway, what I am wondering is if there is a means of using generics to pass TenantRecord into DataTableComposable, and to define that component in such a way as to accept an incoming record type <T> as well. Something like ...

const DataTableComposable = defineAsyncComponent<TenantRecord>(() => import('@/components/data_table_composable.vue'));

... or some permutation thereof.

Thank you kindly in advance!

[GueganVictor]

Did you have a look at the Vue 3.3 generic components ?
Discussion #436

Here is an example of implementation :
https://dev.to/vincentdorian/vue-33-generic-types-and-when-to-use-them-5egn

[abalashov]

This is exactly what I was looking for - thank you!