Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqNUk1v2zAM/SucDkMCxDaG7uQ5Rrehh+3QFW2OvjgWk6q1PiDRSYvA/32U1XVe9oHpRvKJfO+RJ/HRufwwoChFRahd3xLWjQF+pxOE3lLId9YSehjHlK/eZBlsBwJ6dgh2B1WEgWk1rhuRwI2AUkkO3zWirooIqKFrDRytf8why3hGVcwGchg6rxxB35o9f6TAPQLS4GCPBr3qOLkBfCI0MkAgr8yemzdG4k4ZvPHWhSpRvmYqoYQNjPVi2ZjOmkBJC6whwe9iVN1iZ72sNitYLGFdQ2uea3gLJ0gqFi42LTlWsgQz6G20YVlGXGz9IYpItGuxEko76ynTrcsfgjVs6Sk61rwUWBC3Sh42gj2PcSPuiXhGUXTS8DeJvTr43CAVxunikmGFHwwpjZm0+vIiv8jfF1IFmqdzDDrbensM6LlJI1azMQUnD+gzz8ahj7v5v7Fn3+ajz0q/jY/T+VpGNoUC279T+zNLOqud6tF/c6R4Pb9Y0/a9PX6dcuQHfNXS3WP3+If8Q3hKmm48Tsxm+qn1e6RUvrq75vOZFbWVQ/+yhr8UbzHYfogcE+zTYCTTnuEmtl+mDfNFbsJVvNDwQ1QkOrkx4ad9fP6H9J902e1XF8fvEGo5aw==

Steps to reproduce

<template>
    {{ slots.footer }}
    <!-- but type of <slot name="footer" :id="1"></slot> can work. -->
</template>

<script lang="ts" setup generic="T extends string">
defineProps<{ slotNames: T }>()
const slots = defineSlots<Record<T, () => any> & { footer(props: { id: number }): any}>();
</script>

What is expected?

Property 'footer' should be in slots in template.

What is actually happening?

Property 'footer' does not exist on type 'Readonly<NonNullable<Record<T, () => any> & { footer(props: { id: number; }): any; }>> extends Ref ? V : Readonly<NonNullable<Record<T, () => any> & { ...; }>> extends Ref<...> ? unknown extends V ? undefined : V : Readonly<...>'.ts(2339)

System Info

No response

Any additional comments?

No response

/cc @so1ve

const slots = defineSlots<Record<T, () => any> & { footer(props: { id: number }): any}>(); doesn't work but const slots = defineSlots<{ footer(props: { id: number }): any} & Record<T, () => any>>(); works.

I guess this might be related to https://github.com/microsoft/TypeScript/issues/51092

slots looks to work:

I think this might be an issue with language tools

/cc @johnsoncodehk

Blocked by https://github.com/vuejs/language-tools/issues/3651, I opened https://github.com/vuejs/language-tools/pull/3671 to fix this issue temporarily