How to set types to vue slot props Typescript

Question

I'm trying to set types on my slot props to handle in a table component as you can see in the image

I also have been trying with

#body={item: UserItem}, but it is only rename the parametter. #body={<UserItem>item} and #body={item<UserItem>}, but it does not work

Answer 1

插槽范围是一个对象，因此您需要输入对象本身，例如

<template #body="{ item }: { item: UserItem }" />

但是，如果该Table组件是您自己的组件，您也可以结合使用generic和defineProps来根据传入的 propdefineSlots自动推断插槽中的类型。itemvalues

<script setup lang="ts" generic="T">
const props = defineProps<{
  values: T[]
}>()

const slots = defineSlots<{
  body(props: { item: T }): any
}>()
</script>

Answer 2

你可以用defineSlots来做到这一点

例子：

 // in yout template

 <slot name="body" :msg="msg"></slot>

// in your script

defineSlots<{
  body(props: { msg: string }): any
}>()

这样你就会得到字符串类型的 msg