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

The slot scope is an object so you need to type the object itself like

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

But if the Table component is your own component you could also use generic in combination with defineProps and defineSlots to automatically infer the type for item in your slot based on the values prop that is passed in.

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

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