This expression is not callable. Type '{}' has no call signatures - Dynamic slots + Generic

[jd-solanki]

Hi 👋🏻

I was playing with the generic components feature and stumbled upon this issue where I get a type error on the slot like below:

Reproduction: https://github.com/jd-solanki/volar-vue-playground/blob/generic-component-type/src/bar/Bar.vue

Note
Watch out for branch

  System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 6.86 GB / 15.95 GB
  Binaries:
    Node: 18.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.4.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1555.0), Chromium (112.0.1722.68)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vue: 3.3.0-beta.4 => 3.3.0-beta.4 
    vue-tsc: ^1.6.4 => 1.6.4

P.S. It will be much easier for you if you add issue template

[jd-solanki]

Upon further inspection, I found that component meta shown empty slots array:

I guess vue component meta doesn't properly handle the generics yet 🤔

[jd-solanki]

@johnsoncodehk is this supported by volar ATM?

Because I think both are the same thing 🤔

I also tried doing something like this for my actual code but doesn't seems to work:

{ [name in `col-${RowKey<Row>}`]: (_: { row: Row; colIndex: number }) => any }

[johnsoncodehk]

This doesn't seem to be a Volar issue, you can reproduce it in script.

<script lang="ts" setup generic="Row extends Record<string, unknown>">
import { objectKeys } from '../utils';
import { aTableProps, aTableSlots } from './meta';

const props = defineProps(aTableProps<Row>())

const _slots = aTableSlots<Row>(
    objectKeys(props.rows[0] || {}),
)
defineSlots<typeof _slots>()

for (const col of props.cols) {
    _slots[`header-${col.name}`]?.({ col }); // Type '{}' has no call signatures.ts(2349)
}
</script>

[jd-solanki]

Hi @johnsoncodehk

Thanks for your inspection. May I know how to resolve this because according to me I'm generating correct object in aTableSlots?

Awaiting your response.

[jd-solanki]

Strange thing is if you comment before-table slot then type error went away.

Extending my previous comment, I guess I'm generating correct object but it looks like there's issue with the generated type.

[xiaoxiangmoe]

@jd-solanki Hi, it seems to be this is a TypeScript's limit:

type Slots<Foo extends string> = {
  readonly "before-table": (_: any) => null;
} & Record<`header-${Foo}`, (_: { col: any }) => any>;

function foo<Foo extends string>(
  slots: Slots<Foo>,
  key: `header-${Foo}`
) {
  const slot = slots[key];
  // @ts-expect-error This expression is not callable. Type '{}' has no call signatures.ts(2349)
  slot?.({ col: 1 });
}

If you simplify your code:

type Slots<Foo extends string> = Record<`header-${Foo}`, (_: { col: any }) => any>;

function foo<Foo extends string>(
  slots: Slots<Foo>,
  key: `header-${Foo}`
) {
  const slot = slots[key];
  slot?.({ col: 1 });
}

All works well.

Maybe you should create a issue to TypeScript.

[xiaoxiangmoe]

Closed this issue because it is an upstream issue, if you need any other help, or if you find any other volar issues, please feel free to raise them below.

[jd-solanki]

Hi @xiaoxiangmoe

Thanks for your response. Can you please share your thoughts on this: https://www.typescriptlang.org/play?target=99#code/FAFwngDgpgBAygGwPYgM4B4BiSkygDxCgDsATVGVEAJwEtiBzAPhgF4YBvYGGaqAQ1JJiCMDABEAIygAzJHwC0IfpIRRxALhgAKAPpb+xMAEo2LYgFcECANzAAvjABkMAEpQAxvNLoABgAsBUihqBQASDmwke18AGh19ThgvBAMjGHtTVhZDMCY7YBkLYg8QWmEYOSR0AEFqBgoCIjIKAG1EFAwqOkYmeO76BgBdJm1uGAA6KdbUZDR4gGsoMCGtOoa8QhJyGHa5jHoZEJgovsoaQaGYAH5djrQsHDOAoJDwyJwYq61iKAA3ELAUxcHheYhUShzNiQzqtJYrAo8AD0SJgAHV5AtUABCcazFDaDjJJCpGAARgyxjs9iAA

[jd-solanki]

Might be similar: vuejs/core#8352