Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

lbecket's avatar
Level 39

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)

0 likes
0 replies

Please or to participate in this conversation.