Closed
Description
Hi. Here's simple reproduction of scoped slots implementation (of course in this form it does not make any sense, it's just to show the problem).
DemoParent.vue
<template>
<DemoChild
:demo-prop="x" // value "a"
v-slot="slotProps"
>
{{ slotProps.item }} <- will render "a" so should be same type as demo-prop
</DemoChild>
</template>
<script setup lang="ts">
import DemoChild from '@/components/DemoChild.vue'
type DemoPropType = 'a' | 'b'
const x: DemoPropType = 'a'
</script>
DemoChild.vue
<template>
<div>
<slot :item="demoProp" />
</div>
</template>
<script setup lang="ts">
defineProps({
demoProp: {
type: String,
required: true,
},
})
</script>
It's good that extension can detect in parent component type of slotProps based on types defined inside child component, so slotProps.item as string in this example. BUT in parent I'm passing not just any string but with certain type, so I need to know that returned slot prop is also in that type.
In real world example I have universal components for table and columns and it works just great on browser but in IDE I'm losing any information of passed data types which is bad.
Any ideas for workarounds or could this be supported by extension?
Regards!