v-slot: This expression is not callable. Type XXX has no call signatures.

[Jungzl]

Description

<script lang="ts" setup>
import { ref } from 'vue';

const foo = ref('bar');

defineSlots<{
  default: {
    foo: string;
  };
}>();
</script>

<template>
  <div>
    <slot v-bind="{ foo }" />
    <!-- ^^^  This expression is not callable. 
              Type '{ foo: string; }' has no call signatures. -->
  </div>
</template>

Reproduction

Stackblitz

[johnsoncodehk]

This is expected, see #3116.

You need to change the code to

defineSlots<{
  default: {
-    foo: string;
+    foo?: (_: string) => any;
  };
}>();

[jd-solanki]

Hey Johnson,

I just noticed short slots syntax is not supported ATM. I wanted to point out that I was using object syntax and generating type based on that using defineSlots<typeof aTableSlots>().

For complex component like select which uses list and list-item under the hood, I modify the obj according to user DX and implementation and later generate type using defineSlots<typeof aSelectSlots>.

So the point I'm trying to make is, using object syntax was fairly easy and it was easy to modify and extend the slots objects. (e.g. prefixObjectKeys(listSlots, 'list-item-') for reusing slots in another component)

However, with full syntax, it's hard to modify the slots as value because now we have to deal with function params instead of object.

So, here's my use case and request for bringing back object syntax.

Thanks for your efforts 🙏🏻