Element implicitly has an 'any' type
I'm trying to dynamically define slots inside a component wrapper and I'm getting a TypeScript error about how TS can't infer the type. I am struggling to understand how I can set the type of scopedSlotName explicitly.
<script setup lang="ts">
//
</script>
<template>
<v-data-table-virtual
v-bind="{ ...$attrs }"
v-on="$attrs"
>
<template
v-for="(_, scopedSlotName) in $slots"
:key="scopedSlotName"
#[scopedSlotName]="slotData" // ERROR OCCURS HERE ON scopedSlotName
>
<slot
:name="scopedSlotName"
v-bind="slotData"
/>
</template>
</v-data-table-virtual>
</template>
Here's the full error:
Element implicitly has an 'any' type because expression of type 'string | number' can't be used to index type 'Readonly<{ [x:
item.${string}]: ((arg: ItemKeySlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]) | undefined; [x:header.${string}]: ((arg: { ...; }) => VNode<...>[]) | undefined; ... 17 more ...; 'body.append'?: ((arg: VDataTableVirtualSlotProps<...>) => VNode<...>[]) | undefined; }>...'. No index signature with a parameter of type 'string' was found on type 'Readonly<{ [x:item.${string}]: ((arg: ItemKeySlot) => VNode<RendererNode, RendererElement, { [key: string]: any; }>[]) | undefined; [x:header.${string}]: ((arg: { ...; }) => VNode<...>[]) | undefined; ... 17 more ...; 'body.append'?: ((arg: VDataTableVirtualSlotProps<...>) => VNode<...>[]) | undefined; }>...'.ts-plugin(7053)
Please or to participate in this conversation.