Generic Type is unknown when consuming slot prop

[ExistentialAlex]

Hi there,

I have created a component library for our company that was working really well.
Recently, I updated our component library to use the latest typescript version (v5.5.4) and the latest vue-tsc (v2.0.29).

However, when now trying to consume generic components in our component library from a separate vue project, the slot props are coming through as unknown despite the types being compiled correctly in the library.

I've provided the generated .d.ts file for one of the failing components and a screenshot showcasing the error. This happens both in VSCode and at compile time.

I'd really appreciate it if someone knows what's happening here and if I've missed something when it comes to updating my packages.

import { IAdtDenseProp, IAdtTableHeader, IAdtTableSortItem, IAdtTableStickyColumn } from '../../types';

export interface AdtTableProps<T> extends IAdtDenseProp {
    items: T[];
    itemKey?: keyof T | ((item: T) => number | string);
    headers?: IAdtTableHeader<T>[];
    itemsPerPage?: number;
    perPageOptions?: number[];
    noDataText?: string;
    page?: number;
    pageDialog?: boolean;
    sortBy?: IAdtTableSortItem<T>[];
    serverSort?: boolean;
    mustSort?: boolean;
    stickyHeader?: boolean;
    select?: boolean;
    loading?: boolean;
    totalItemsOverride?: number;
    itemsOffset?: number;
    height?: string;
    tableOverflow?: boolean;
    itemExpanded?: (item: T) => boolean;
    rowProps?: Record<string, any> | ((rowData: {
        item: T;
        index: number;
    }) => Record<string, any>);
    dataTestid?: string;
    stickyColumns?: Array<number | IAdtTableStickyColumn>;
}
declare const _default: <T>(__VLS_props: Awaited<typeof __VLS_setup>["props"], __VLS_ctx?: __VLS_Prettify<Pick<Awaited<typeof __VLS_setup>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
    props: __VLS_Prettify<__VLS_OmitKeepDiscriminatedUnion<(Partial<{}> & Omit<{
        "onUpdate:page"?: ((...args: any[]) => any) | undefined;
        "onUpdate:items-per-page"?: ((...args: any[]) => any) | undefined;
        "onUpdate:sort-by"?: ((...args: any[]) => any) | undefined;
        "onUpdate:selected"?: ((...args: any[]) => any) | undefined;
        "onLoad-more"?: ((...args: any[]) => any) | undefined;
    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>> & {
        "onUpdate:page"?: ((...args: any[]) => any) | undefined;
        "onUpdate:items-per-page"?: ((...args: any[]) => any) | undefined;
        "onUpdate:sort-by"?: ((...args: any[]) => any) | undefined;
        "onUpdate:selected"?: ((...args: any[]) => any) | undefined;
        "onLoad-more"?: ((...args: any[]) => any) | undefined;
    }, never>) & AdtTableProps<T>, keyof import('vue').VNodeProps | keyof import('vue').AllowedComponentProps>> & {} & (import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps);
    expose(exposed: import('vue').ShallowUnwrapRef<{
        recalculateStickyColWidths: () => void;
    }>): void;
    attrs: any;
    slots: ReturnType<() => Partial<Record<`header.${string}`, (_: {
        header: IAdtTableHeader<T>;
        index: number;
    }) => any>> & Partial<Record<`loading-item.${string}`, (_: {}) => any>> & Partial<Record<`item.${string}`, (_: {
        item: T;
        index: number;
    }) => any>> & {
        top?(_: {}): any;
        body?(_: {
            items: T[];
        }): any;
        noData?(_: {
            noDataText: string;
        }): any;
        "expanded-row"?(_: {
            item: T;
            index: number;
        }): any;
        bottom?(_: {}): any;
    }>;
    emit: (event: "update:page" | "update:items-per-page" | "update:sort-by" | "update:selected" | "load-more", ...args: any[]) => void;
}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
    [key: string]: any;
}> & {
    __ctx?: Awaited<typeof __VLS_setup>;
};
export default _default;
type __VLS_Prettify<T> = {
    [K in keyof T]: T[K];
} & {};

For reverence, this is the old .d.ts file before I made the updates:

import { IAdtDenseProp, IAdtTableHeader, IAdtTableSortItem, IAdtTableStickyColumn } from '../../types';

export interface AdtTableProps<T> extends IAdtDenseProp {
    items: T[];
    itemKey?: keyof T | ((item: T) => number | string);
    headers?: IAdtTableHeader<T>[];
    itemsPerPage?: number;
    perPageOptions?: number[];
    noDataText?: string;
    page?: number;
    pageDialog?: boolean;
    sortBy?: IAdtTableSortItem<T>[];
    serverSort?: boolean;
    mustSort?: boolean;
    stickyHeader?: boolean;
    select?: boolean;
    loading?: boolean;
    totalItemsOverride?: number;
    itemsOffset?: number;
    height?: string;
    tableOverflow?: boolean;
    itemExpanded?: (item: T) => boolean;
    rowProps?: Record<string, any> | ((rowData: {
        item: T;
        index: number;
    }) => Record<string, any>);
    dataTestid?: string;
    stickyColumns?: Array<number | IAdtTableStickyColumn>;
}
declare const _default: <T>(__VLS_props: {
    height?: string | undefined;
    page?: number | undefined;
    select?: boolean | undefined;
    dataTestid?: string | undefined;
    items: T[];
    itemKey?: keyof T | ((item: T) => string | number) | undefined;
    dense?: boolean | undefined;
    loading?: boolean | undefined;
    headers?: IAdtTableHeader<T>[] | undefined;
    itemsPerPage?: number | undefined;
    perPageOptions?: number[] | undefined;
    noDataText?: string | undefined;
    pageDialog?: boolean | undefined;
    sortBy?: IAdtTableSortItem<T>[] | undefined;
    serverSort?: boolean | undefined;
    mustSort?: boolean | undefined;
    stickyHeader?: boolean | undefined;
    totalItemsOverride?: number | undefined;
    itemsOffset?: number | undefined;
    tableOverflow?: boolean | undefined;
    itemExpanded?: ((item: T) => boolean) | undefined;
    rowProps?: Record<string, any> | ((rowData: {
        item: T;
        index: number;
    }) => Record<string, any>) | undefined;
    stickyColumns?: (number | IAdtTableStickyColumn)[] | undefined;
    "onUpdate:page"?: ((...args: any[]) => any) | undefined;
    "onUpdate:items-per-page"?: ((...args: any[]) => any) | undefined;
    "onUpdate:sort-by"?: ((...args: any[]) => any) | undefined;
    "onUpdate:selected"?: ((...args: any[]) => any) | undefined;
    "onLoad-more"?: ((...args: any[]) => any) | undefined;
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, __VLS_ctx?: {
    attrs: any;
    slots: Partial<Record<`header.${string}`, (_: {
        header: IAdtTableHeader<T>;
        index: number;
    }) => any>> & Partial<Record<`loading-item.${string}`, (_: {}) => any>> & Partial<Record<`item.${string}`, (_: {
        item: T;
        index: number;
    }) => any>> & {
        top?(_: {}): any;
        body?(_: {
            items: T[];
        }): any;
        noData?(_: {
            noDataText: string;
        }): any;
        "expanded-row"?(_: {
            item: T;
            index: number;
        }): any;
        bottom?(_: {}): any;
    };
    emit: (event: "update:page" | "update:items-per-page" | "update:sort-by" | "update:selected" | "load-more", ...args: any[]) => void;
} | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{
    recalculateStickyColWidths: () => void;
}>) => void) | undefined, __VLS_setup?: Promise<{
    props: {
        height?: string | undefined;
        page?: number | undefined;
        select?: boolean | undefined;
        dataTestid?: string | undefined;
        items: T[];
        itemKey?: keyof T | ((item: T) => string | number) | undefined;
        dense?: boolean | undefined;
        loading?: boolean | undefined;
        headers?: IAdtTableHeader<T>[] | undefined;
        itemsPerPage?: number | undefined;
        perPageOptions?: number[] | undefined;
        noDataText?: string | undefined;
        pageDialog?: boolean | undefined;
        sortBy?: IAdtTableSortItem<T>[] | undefined;
        serverSort?: boolean | undefined;
        mustSort?: boolean | undefined;
        stickyHeader?: boolean | undefined;
        totalItemsOverride?: number | undefined;
        itemsOffset?: number | undefined;
        tableOverflow?: boolean | undefined;
        itemExpanded?: ((item: T) => boolean) | undefined;
        rowProps?: Record<string, any> | ((rowData: {
            item: T;
            index: number;
        }) => Record<string, any>) | undefined;
        stickyColumns?: (number | IAdtTableStickyColumn)[] | undefined;
        "onUpdate:page"?: ((...args: any[]) => any) | undefined;
        "onUpdate:items-per-page"?: ((...args: any[]) => any) | undefined;
        "onUpdate:sort-by"?: ((...args: any[]) => any) | undefined;
        "onUpdate:selected"?: ((...args: any[]) => any) | undefined;
        "onLoad-more"?: ((...args: any[]) => any) | undefined;
    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
    expose(exposed: import('vue').ShallowUnwrapRef<{
        recalculateStickyColWidths: () => void;
    }>): void;
    attrs: any;
    slots: Partial<Record<`header.${string}`, (_: {
        header: IAdtTableHeader<T>;
        index: number;
    }) => any>> & Partial<Record<`loading-item.${string}`, (_: {}) => any>> & Partial<Record<`item.${string}`, (_: {
        item: T;
        index: number;
    }) => any>> & {
        top?(_: {}): any;
        body?(_: {
            items: T[];
        }): any;
        noData?(_: {
            noDataText: string;
        }): any;
        "expanded-row"?(_: {
            item: T;
            index: number;
        }): any;
        bottom?(_: {}): any;
    };
    emit: (event: "update:page" | "update:items-per-page" | "update:sort-by" | "update:selected" | "load-more", ...args: any[]) => void;
}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
    [key: string]: any;
}> & {
    __ctx?: {
        props: {
            height?: string | undefined;
            page?: number | undefined;
            select?: boolean | undefined;
            dataTestid?: string | undefined;
            items: T[];
            itemKey?: keyof T | ((item: T) => string | number) | undefined;
            dense?: boolean | undefined;
            loading?: boolean | undefined;
            headers?: IAdtTableHeader<T>[] | undefined;
            itemsPerPage?: number | undefined;
            perPageOptions?: number[] | undefined;
            noDataText?: string | undefined;
            pageDialog?: boolean | undefined;
            sortBy?: IAdtTableSortItem<T>[] | undefined;
            serverSort?: boolean | undefined;
            mustSort?: boolean | undefined;
            stickyHeader?: boolean | undefined;
            totalItemsOverride?: number | undefined;
            itemsOffset?: number | undefined;
            tableOverflow?: boolean | undefined;
            itemExpanded?: ((item: T) => boolean) | undefined;
            rowProps?: Record<string, any> | ((rowData: {
                item: T;
                index: number;
            }) => Record<string, any>) | undefined;
            stickyColumns?: (number | IAdtTableStickyColumn)[] | undefined;
            "onUpdate:page"?: ((...args: any[]) => any) | undefined;
            "onUpdate:items-per-page"?: ((...args: any[]) => any) | undefined;
            "onUpdate:sort-by"?: ((...args: any[]) => any) | undefined;
            "onUpdate:selected"?: ((...args: any[]) => any) | undefined;
            "onLoad-more"?: ((...args: any[]) => any) | undefined;
        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
        expose(exposed: import('vue').ShallowUnwrapRef<{
            recalculateStickyColWidths: () => void;
        }>): void;
        attrs: any;
        slots: Partial<Record<`header.${string}`, (_: {
            header: IAdtTableHeader<T>;
            index: number;
        }) => any>> & Partial<Record<`loading-item.${string}`, (_: {}) => any>> & Partial<Record<`item.${string}`, (_: {
            item: T;
            index: number;
        }) => any>> & {
            top?(_: {}): any;
            body?(_: {
                items: T[];
            }): any;
            noData?(_: {
                noDataText: string;
            }): any;
            "expanded-row"?(_: {
                item: T;
                index: number;
            }): any;
            bottom?(_: {}): any;
        };
        emit: (event: "update:page" | "update:items-per-page" | "update:sort-by" | "update:selected" | "load-more", ...args: any[]) => void;
    } | undefined;
};
export default _default;
type __VLS_Prettify<T> = {
    [K in keyof T]: T[K];
} & {};

[ExistentialAlex]

This issue was I hadn't updated vite-plugin-dts which I forgot was actually generating these types... 😄

[ExistentialAlex]

After updating to the latest version the issue was fixed. 🥳