Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Eurkidu opened this issue Sep 8, 2020 · 10 comments · Fixed by #2259

Comments

@Eurkidu
Copy link

Eurkidu commented Sep 8, 2020

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>
@yoyo930021 yoyo930021 self-assigned this Sep 8, 2020
yoyo930021 added a commit to yoyo930021/vuter that referenced this issue Sep 8, 2020
@yoyo930021 yoyo930021 mentioned this issue Sep 8, 2020
octref added a commit that referenced this issue Sep 13, 2020
@JW9506
Copy link

JW9506 commented Sep 25, 2020

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
Copy link
Member

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
Copy link

JW9506 commented Sep 25, 2020

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
Copy link
Member

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
Copy link

JW9506 commented Sep 25, 2020

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
Copy link
Member

yoyo930021 commented Sep 28, 2020

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
Copy link

@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
Copy link

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
Copy link

tvld commented Oct 29, 2022

Did not help for me. I managed with:

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

@yoyo930021
Copy link
Member

yoyo930021 commented Oct 31, 2022

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

@vuejs vuejs locked as too heated and limited conversation to collaborators Oct 31, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants