Being aware of scoped slots types based on data from parent (typescript)

[chojnicki]

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!

[johnsoncodehk]

Hi @chojnicki, in short vue can't support this for now. But you can do it with some hack ways by volar (I don't recommend it).

See:

• Can I refer to the other prop inside a prop? #143
• Can I refer to the other prop inside a prop? #143 (reply in thread)
• Vue Class Composition-API rfcs#310

[chojnicki]

@johnsoncodehk This hacky workaround will not work in my case :( Event if this cant be automatically detected by Volar it would be great to be at least able assert type inside like v-slot="slotProps as someType" (I know it's Vue limitation not Volar in that matter).

But thanks anyway for detailed answer!

[johnsoncodehk]

Let we wait for vuejs/core#1359 :)

[mesqueeb]

@johnsoncodehk sorry to comment on a closed issue.
However, the vueJS issue you linked was already closed, so I was hoping for some clarification.

My parent has the scope it passes to the slot typed correctly:

but this is still not recognised by the child:

my feature request would be:

• allow for auto-detecting the slot scope type based on what the parent is passing into the slot scope.

Should I create a new FR issue for this?

Best regards.

[johnsoncodehk]

Hi @mesqueeb, this feature has been temporarily deprecated since v0.34.0.

See:

• Drop support for template typed slots with defineComponent to reduce a half memory usage #1108
• Support for typed template slots #1253

[johnsoncodehk]

Just for record, this feature is back at v0.36.0 (only for script setup): https://github.com/johnsoncodehk/volar/blob/master/CHANGELOG.md#0360-202263