[RFC436] Generic-typed slots in child components do not work when inside a parent component that is also using generic types

[colinj]

I am using Volar 1.0.8 / Vite 3.1.8 / Vue 3.2.41 with experimentalRfc436 enabled.

This relates to #1987

I have a generic list component that has a default slot that exposes the item: T property in a scoped slot. This works perfectly when the parent component is a non-generic component.
When I hover over v-slot it displays the type defined by the items prop. eg { name: string; age: number; }

<MyList :items="listOfPeople" v-slot="{ item }">
  {{ item.name }} is {{ item.age }} years old.
</MyList>

But when I try to use the same generic component inside of another generic component, TypeScript displays an error over the scoped-slot in the child component.

<script setup lang="ts" generic="T extends Record<string, unknown>">
  defineProps<{ items: T[] }>();
  const display = (item: T): string => { return ... };
....
</script>
<template>
  <MyList :items="items" v-slot="{ item }"> <!-- TypeScript error here -->
    {{ display(item) }}
  </MyList>
</template>

TypeScript error:

Element implicitly has an 'any' type because expression of type '"default"' can't be used to
index type Record<string, any> | {} | { default: { item: T; }; }.
Property 'default' does not exist on type Record<string, any> | {} | { default: { item: T; }; }.

I'm not sure why, but it seems that the slot is incorrectly typed and it only happens when the parent component includes the generic attribute in the script setup.
When comparing to the union type, TypeScript says the default property does not exist on the type which I think is due to the inclusion of the empty object {}.

[johnsoncodehk]

Just have a quick look I think this is expected TS behavior, you can try:

<template>
  <MyList :items="(items as Record<string, unknown>[])" v-slot="{ item }"> <!-- TypeScript error here -->
    {{ display(item) }}
  </MyList>
</template>

or

<template>
  <MyList :items="items" v-slot="{ item }: { item: T }"> <!-- TypeScript error here -->
    {{ display(item) }}
  </MyList>
</template>

[colinj]

@johnsoncodehk Yes, I tried this as well but this did not change the error message since item already conforms to the real slot type signature. The red squiggly line is actually under the v-slot and not under the object value.

<template>
  <MyList :items="items" v-slot="{ item }: { item: T }"> <!-- TypeScript error here -->
                         ~~~~~~  <!-- error is default slot itself -->
    {{ display(item) }}
  </MyList>
</template>

It seems like TypeScript is unable to resolve the type of the (default) slot.

<template>
  <MyList :items="items" v-slot="prop"> 
                         ~~~~~~  <!-- error is default slot itself -->
    {{ display(prop.item) }}
  </MyList>
</template>

When I hover over prop, TypeScript isn't able to resolve the type and treats it as any.
It still displays, the same TypeScript error message above. So it isn't able to use "default" as an index type against the type Record<string, any> | {} | { default: { item: T; }; }.

If the type was just { default: { item: T; }; } then it would work.
When it is union-ed with {} (empty object} it cannot find the "default" key.
Even if you removed {} from the union type, the TypeScript error will go away but default will still resolve to any due to Record<string, any>. See the TypeScript playground link for the examples.

TypeScript playground slot type examples

[johnsoncodehk]

Not sure I make repro code correct, it seems no problem to me, could you provide minimal reproduction?

• App.vue

<script setup lang="ts" generic="T extends Record<string, unknown>">
import HelloWorld from './components/HelloWorld.vue';

defineProps<{ items: T[] }>();

const display = (item: T): string => { return '' };
</script>

<template>
  <HelloWorld :items="items" v-slot="{ item }">
    {{ display(item) }}
    <!--       ^? -->
  </HelloWorld>
</template>

• components/HelloWorld.vue

<script setup lang="ts" generic="T extends any">
defineProps<{ items: T[] }>();
</script>
<template>
  <slot :item="items[0]"></slot>
  <!--   ^? -->
</template>

[colinj]

Hi @johnsoncodehk, I just tried this again and I got the same results as you. It looks like it is working as expected. 👍 👍 👍

I'm running volar 1.0.9 now. So it must've been fixed in this version. Thank you!

• components/MyList.vue

<script setup lang="ts" generic="T extends Record<string, unknown>">
defineProps<{ items: T[] }>();
</script>
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot v-bind="{ item }" />
    </li>
  </ul>
</template>

• App.vue

<script setup lang="ts">
import MyList from "./components/MyList.vue";

interface People {
  name: string;
  age: number;
}

const people = ref<People[]>([{ name: "Peter", age: 10 }]);
</script>

<template>
  <MyList :items="people" v-slot="{ item }">
    {{ item.name }} {{ item.age}}
  </MyList>
</template>

Hovering over the v-slot, it now shows the correct type in the tooltip! 👍

(property) default: {
    item: {
        name: string;
        age: number;
    };
    index: number;
}

And item is correctly shown as { name: string; age: number }

Thank you @johnsoncodehk. I think this issue is resolved. 😅