Version 2: looping over slots as a variable causes error TS2345

[isazulay]

Use case: Having a wrapper component, I want the parent to be able to populate the slots of the wrapped component.

Implementation:

<template>
  <v-alert
    v-bind="props"
    variant="outlined">
    <template v-for="(_, slot) in slots" #[slot]="scope">
      <slot :name="slot" v-bind="scope || {}" />
    </template>
  </v-alert>
</template>

<script setup lang="ts">
import type { VAlert } from 'vuetify/components/VAlert';
import type { Props } from './types/CustomAlert.model';

const props = defineProps<Props>();
const slots = defineSlots<VAlert['$slots']>();
</script>

Current behavior: The use case is still possible to run with the same code prior to v2 of vue-tsc, but running the vue-tsc command return the following error:

error TS2345: Argument of type '{ props?: Record<string, any> | undefined; }' is not assignable to parameter of type '{ props: Record<string, any>; }'.
  Types of property 'props' are incompatible.
    Type 'Record<string, any> | undefined' is not assignable to type 'Record<string, any>'.
      Type 'undefined' is not assignable to type 'Record<string, any>'.

Expected behavior: Running vue-tsc should not throw an error.

[so1ve]

Could you please provide a reproduction without using vuetify's types? Thanks in advance.

[isazulay]

Can be closed. Not reproduce without import Vuetify types

[so1ve]

Sorry I don't mean that. I mean you can copy and simplify vuetify's types and inline them to this SFC. Anyway I'll debug locally.

[isazulay]

I think the bug is in the implementation of slot types in Vuetify. I'm not able to reproduce it when implementing a similar model to the one from Vuetify, because then the scope property within #[slot]="..." is typed. When using the Vuetify component this is set to any and only throws an error on build time. When using my own component, it throws the error in the IDE.

[webdevnerdstuff]

I'm also experiencing this as well. In the npm package vue-tsc v2.0.26 (and lower) the error did not happen. It only started as of v2.0.28.

[webdevnerdstuff]

I think the bug is in the implementation of slot types in Vuetify. I'm not able to reproduce it when implementing a similar model to the one from Vuetify, because then the scope property within #[slot]="..." is typed. When using the Vuetify component this is set to any and only throws an error on build time. When using my own component, it throws the error in the IDE.

Would you please check out this issue which also seems to address this problem that keeps coming and going. https://github.com/vuejs/core/issues/575#issuecomment-1567979742