defineSlots: use Short Syntax in vscode(Volar2+), template slot type is never.

[warmthsea]

defineSlots: use Short Syntax in vscode(Volar2+), template slot type is never.

[dosubot]

Hey there, @warmthsea! 👋 Good to see you back here with another insightful observation. How's everything going on your end?

Thank you for providing detailed information about the issue you're facing. It seems like you're encountering a problem with the short syntax of defineSlots in Volar2+ with vue-macros, where the template slot type is showing as "never". This is likely due to how TypeScript infers types in the context of JSX/TSX and Vue's composition API.

In the vue-macros codebase, the __VLS_DefineSlots<T> type is designed to transform slot types, ensuring that if a slot is a function, it is used directly; otherwise, it wraps the type in a function that takes the slot type as an argument. This transformation is crucial for Vue's template slot syntax to work correctly with TypeScript's type system.

However, when using the short syntax for slots, TypeScript might not have enough information to correctly infer the slot types, leading to the "never" type. This is because the short syntax does not explicitly define the slot types, and TypeScript's default behavior in the absence of explicit types is to infer the "never" type.

To resolve this issue, you can try the following approaches:

1. Explicit Type Annotations: Ensure that all slots are explicitly typed. This can be done by using the full syntax for slots or by providing explicit type annotations for your slots when using the short syntax. This gives TypeScript the information it needs to correctly infer the slot types.

2. Modify the __VLS_DefineSlots Type Definition: If the issue persists, you might need to adjust the __VLS_DefineSlots type definition to better accommodate TypeScript's type inference mechanisms. This could involve tweaking the type transformation logic to ensure that TypeScript can correctly infer the types of slots, even when using the short syntax.

3. Update Volar and vue-macros: Ensure that you are using the latest versions of Volar and vue-macros. It's possible that this issue has been recognized and addressed in newer versions of these tools.

Regarding the difference between the short syntax and the full syntax for defining slots in vue-macros, the short syntax directly specifies the slot as a function type, indicating the type of the scope object that the slot will receive. On the other hand, the full syntax directly specifies the type of the scope object without wrapping it in a function type.

Unfortunately, I couldn't find the exact implementation of the defineSlots macro in the vue-macros codebase. It might be helpful to look into the source code or the documentation of vue-macros for more details.

I hope this information helps! If you have any more questions or need further clarification, feel free to ask.

Sources

• ✨ Allow using defineSlots short syntax in Vue 3.3
• packages/volar/src/define-slots.ts
• playground/vue3/src/examples/define-slots/child.vue

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[sxzz]

As docs mentioned https://vue-macros.dev/guide/getting-started.html

❌ Considering that v2 is not yet stable and some issues remain unresolved, plus adapting to 2.x would mean an almost irreversible upgrade for Vue Macros, we've decided not to support 2.x at this time. In other words, we will continue to support v1.

[warmthsea]

vuejs/language-tools#3955

[warmthsea]

Thank you for your reply. It seems that I need to change the abbreviation in the project to the official one.