Passing all slots to child component causes TypeScript errors

[jacob-carlborg-apoex]

I'm quite new to Vue and TypeScript but I have a need to wrap a component and pass down all the slots to a child component. This is a snippet of what I came up with:

Wrapper component:

<template>
  <Child v-bind="$attrs">
    <template
      v-for="(name, index) of Object.keys($slots)"
      #[name]="slotData"
      :key="index"
    >
      <slot :name="name" v-bind="slotData || {}"></slot>
    </template>
  </Child>
</template>

<script setup lang="ts">
import Child from '@/components/Child.vue'
</script>

<script lang="ts">
export default {
  inheritAttrs: false
}
</script>

Child component:

<template>
  <div>
    <slot name="foo"></slot>
    <slot name="bar"></slot>
  </div>
</template>

Type checking this results in the following errors:

src/components/Wrapper.vue:4:15 - error TS7031: Binding element 'name' implicitly has an 'any' type.

4       v-for="(name, index) of Object.keys($slots)"
                ~~~~

src/components/Wrapper.vue:4:21 - error TS7031: Binding element 'index' implicitly has an 'any' type.

4       v-for="(name, index) of Object.keys($slots)"
                      ~~~~~

src/components/Wrapper.vue:5:9 - error TS2339: Property 'name' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<ExtractPropTypes<{}>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => ...'.

5       #[name]="slotData"
          ~~~~

src/components/Wrapper.vue:5:16 - error TS2304: Cannot find name 'slotData'.

5       #[name]="slotData"
                 ~~~~~~~~

src/components/Wrapper.vue:6:13 - error TS2304: Cannot find name 'index'.

6       :key="index"
              ~~~~~

src/components/Wrapper.vue:8:34 - error TS2304: Cannot find name 'slotData'.

8       <slot :name="name" v-bind="slotData || {}"></slot>
                                   ~~~~~~~~


Found 6 errors in the same file, starting at: src/components/Wrapper.vue:4

It complains that name doesn't exist, even though it's declared as a loop variable just before its usage. On line 5 it also complains that slotData doesn't exist, but that's where slotData is declared.

Any ideas how to properly type this, or is this limitations with the tools?

I've created a repository that shows the problem: https://github.com/jacob-carlborg-apoex/vue-wrapper-component-ts. Clone the repository and run yarn type-check.

[johnsoncodehk]

Thanks for the repro case, fixed by d35ed09.

[jacob-carlborg-apoex]

Thanks.

[devilmark84]

I cannot understand what is the fix. Can you help me understanding how to edit the code to make it works without any typescript error?
Thanks

[so1ve]

@devilmark84 The tests are passing, if you have any problems please open a new issue with minimal reproduction (and your system info / vue-tsc / volar version)