he-tree icon indicating copy to clipboard operation
he-tree copied to clipboard

Typescript error when trying to override Draggable default slot

Open sgielen opened this issue 3 years ago • 2 comments

I have the following snippets of code to override the Draggable default slot:

<template>
  <!-- ...  -->
  <Draggable ...>
    <template v-slot="{ node, tree }">
      <!-- ... -->
    </template>
  </Draggable>
</template>

<script setup lang="ts">
import { Draggable } from "@he-tree/vue3";

// ...
</script>

However, on the line of the <template v-slot>, I get the following typescript error:

ts(7053): Element implicitly has an 'any' type because expression of type '"default"' can't be used to index type '{} | {}'.
  Property 'default' does not exist on type '{} | {}'.

~~The types come from node_modules/@he-tree/vue3/types/draggable/Draggable.vue.d.ts but it doesn't seem to contain slot definitions, hence the error.~~ Just tried generating .d.ts declarations for a Vue component with slots but it appears the slots aren't in the type definition at all? How is this supposed to work at all when including Vue SFC components from npm packages?

sgielen avatar May 27 '22 11:05 sgielen

Found a workaround: instead of <Draggable ...> use <component :is="Draggable" ...> and Typescript checking of slots seems to be disabled, so at least the error is gone. Still wondering how this should be resolved.

sgielen avatar May 27 '22 12:05 sgielen

it seems a ts config error, try "esModuleInterop": true

phphe avatar May 30 '22 13:05 phphe