Vue3, Typescript, Slots - how to get typed data returned from slot

[mavlutovr]

When I send a typed list to a component, how can I get typed items of the list back from a slot?

An example:

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

interface ListItem {
// ...
}

export default defineComponent({

	components: {listing},

	data() {
		return {
			list: [
				// ...
			] as ListItem[],
		}
	},

})
</script>

<template>
	
	<!-- How to send to component typed data -->
	<listing :list="list">
		<template #default="{ item }">
			<!-- And get here typed item from list as ListItem -->
			<!-- Without writing this type inside listing.vue to get possibility to use listing.vue for any types in another components? -->
			<!-- How can I set this type just here, outside of listing.vue -->
		</template>
	</listing>
</template>

[Shyam-Chen]

<script lang="ts" setup generic="T extends object">
import type { VNode } from 'vue';

defineSlots<{
  default: (props: { item: T }) => VNode[];
}>();
</script>

[Alhymalhy]

<script lang="ts" setup generic="T extends object">
import type { VNode } from 'vue';

defineSlots<{
  default: (props: { item: T }) => VNode[];
}>();
</script>

Why doesn't it work without using a generic?, for example

<script lang="ts" setup>
import { ref } from 'vue';
const a = ref<boolean>(false)

defineSlots<{
  foo(props: { a: boolean }): any,
}>()
</script>

<template>
  <div>
    <slot name="foo" :a="a" />
  </div>
</template>

But if you use a generic that is not related to this, everything works, for example:

<script lang="ts" setup generic="T extends object">
import { ref } from 'vue';
const a = ref<boolean>(false)

defineSlots<{
  foo(props: { a: boolean }): any,
}>()
</script>

<template>
  <div>
    <slot name="foo" :a="a" />
  </div>
</template>

playground