Using v-slot, types are any of returned variables from child component
hellokvn opened this issue · 6 comments
Simple Example Repo: https://github.com/hellokvn/vue-facing-decorator-slot-typebug
In the provided example repository, I've created a parent and a child component using both the vue-facing-decorator and Vue's Composition API (setup). In the child component, two variables with specific types are returned. When utilizing Vue's Composition API, the types of the returned variables are accurately maintained. However, when using the vue-facing-decorator, the types of these variables turns to any.
Using vue-facing-decorator:
Not using vue-facing-decorator:
- Does it make any difference here if you export the class components using
toNative? - What types do you see if the Parent and Child components use Vue 3's regular options api (still without vue-facing-decorator)?
- Does it make any difference here if you export the class components using
toNative?- What types do you see if the Parent and Child components use Vue 3's regular options api (still without vue-facing-decorator)?
Thank you for your reply.
a) No difference after exporting both class components with noNative().
b) As you can see in my second screenshot of the initial issue post, the return type is correct using Vue 3's regular options API.
I narrowed down the issue caused by the child class component (class/Child.vue). When I use Vue's regular Composition API in the class/Parent.vue component, the issue is the same, since the class/Child.vue class component still uses vue-facing-decorator.
In class/Child.vue the types are obviously correct, just once I return them in slots, the parent class component class/Parent.vue changes them to t ype any.
@hellokvn Sorry about that, I wasn't very clear - I was curious what the slot types looked like with the regular Vue 3 Options API (with just lang="ts" but without using script setup). I went ahead and tried that real quick and this is what I'm seeing, but would be interested to know if you see the same behavior with your setup:
From this example, it looks like using the Vue 3 Options API even without using vue-facing-decorator shows the slot types as any. That makes it seem like the ability to see slot prop types is unique to components using script setup. And since vue-facing-decorator transforms components into "regular" Options API components, I think we can only ever expect the typing behavior for vue-facing-decorator to be as good as the typings for components using the non-script-setup Options API.
Definitely still interested to know whether you see the same behavior in your context, though.
@rdhelms Got it and can confirm, I see the same behaviour as you do. That's unfortunate, but seems we can't change it for now. I'll stay with my workaround emitting my data to the parental component. Thank you for your investigation. Appreciate!
We can't fully support type checking about v-f-d components as vue setup or defineComponent. We will try to provide more type supports but it is a large and complex work to improve vue's type infer system.
Keep this open.