v-slot with { } accept slot data has type any error in typescript project when update to 0.27.2

[Eurkidu]

Info

• Platform: macOS
• Vetur version: 0.27.2
• VS Code version: 1.48.2

Problem

when update to 0.27.2
use v-slot with { } to accept data has this error tip，but I don‘t know how to definition this type
and when use 0.27.1 version has no this error tip

Reproducible Case

// mc-ossfile-view.vue
<template>
  <div class="mc-ossfile-view">
    <div class="mc-ossfile-view__file-item"
      v-for="(item, idx) in fileList" :key="idx">
      <slot :item="item" :idx="idx"></slot>
      <div class="info-button"></div>
      <slot name="after" :item="item" :idx="idx"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class McOssfileView extends Vue {
  @Prop({ type: Array, default: () => [] }) readonly fileList!: mcLib.TDataObject[]
}
</script>

// use vue file
<mcOssfileView
  :fileList="fileList">
  <template v-slot="{item}">{{item.name}}</template>
  <template v-slot:after="{item}">
    <div class="info-bar">
      <div class="text">{{item.name}}</div>
    </div>
  </template>
</mcOssfileView>

[JW9506]

In 0.28.0, I don't see it being reported as error, but it is still unable to infer the type from the child component. Is this expected?

[yoyo930021]

In 0.28.0, I don't see it being reported as error, but it is still unable to infer the type from the child component. Is this expected?

Yes, we can't infer type from slot.
If you want this, please open a issue,
but maybe have related issue.

[JW9506]

Yes, we can't infer type from slot.
If you want this, please open a issue,
but maybe have related issue.

It definitely enhances the Typescript development experience if we have this feature. It should be one of the reasons why people would rather use Typescript over Javascript when using VueJs. Hope to see this implemented in the future (not just avoiding this).

[yoyo930021]

Yes, we can't infer type from slot.
If you want this, please open a issue,
but maybe have related issue.

It definitely enhances the Typescript development experience if we have this feature. It should be one of the reasons why people would rather use Typescript over Javascript when using VueJs. Hope to see this implemented in the future (not just avoiding this).

It's a lot of work.
It will take a lot of time.

[JW9506]

It's a lot of work.
It will take a lot of time.

If you know ahead of time something takes a lot of work, then you just implied you know the direction towards the end goal, just think about how to achieve it while your Typescript skill gets better.

[yoyo930021]

It's a lot of work.
It will take a lot of time.

If you know ahead of time something takes a lot of work, then you just implied you know the direction towards the end goal, just think about how to achieve it while your Typescript skill gets better.

Follow vuejs/rfcs#192

[TheFranconianCoder]

@yoyo930021 I see there is work in progress regarding this issue. I'm using Vuetify and have the slot type issue with its virtual scroller. Is there any workaround to manually type hint the correct slot type from "any"? I didn't find a way for that. Wondering if it's currently even possible (just manual hinting).

[lukas-pierce]

I use small life hack for it in my TypeScript + Vue3 + ESLint components:

<template>
  <Modal>
    <template #footer="{footerMessage, close}: SlotProps">
      <p>{{ footerMessage }} <a href="#" @click.prevent="close">Dismiss</a></p>
    </template>
  </Modal>
</template>

<script setup lang="ts">
import Modal from './Modal.vue'

// close function signature
type VoidCallback = () => void

// it used for typing slot props
// eslint-disable-next-line no-unused-vars
interface SlotProps {
  footerMessage: string
  close: VoidCallback
}
</script>

The main idea to define interface for typing slot props.
IDE understands it, but ESLint thinks is unused, because it does not see this type usage in #footer

[tvld]

Did not help for me. I managed with:

  <template #expansion-row="props: any">
    <span> More about {{ props.item.username }} </span>
  </template>

[yoyo930021]

Please use volar instead of vetur for vue setup and slot type support.