Skip to content

slots has error type when it's defined by defineSlots with generic. #9383

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
FlareZh opened this issue Oct 12, 2023 · 4 comments · Fixed by vuejs/language-tools#3671
Closed

Comments

@FlareZh
Copy link

FlareZh commented Oct 12, 2023

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

@edison1105
Copy link
Member

/cc @so1ve

@haoqunjiang
Copy link
Member

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 microsoft/TypeScript#51092

@pikax
Copy link
Member

pikax commented Oct 16, 2023

slots looks to work:
image

I think this might be an issue with language tools

/cc @johnsoncodehk

@so1ve
Copy link
Member

so1ve commented Oct 16, 2023

Blocked by vuejs/language-tools#3651, I opened vuejs/language-tools#3671 to fix this issue temporarily

@github-actions github-actions bot locked and limited conversation to collaborators Nov 6, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants