Vue3 + Vite + Typescript: Scoped slots type error

Question

I have project with following devstack (Vue3, Vite, TypeScript) and I'm getting a following error on v-slot :

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 '{} | {}'.ts(7053)

<DataWrapper v-slot="{ values }">
  data: {{ values }}
</DataWrapper>

DataWrapper component injects props to the slot like this

...
<slot :values="data"></slot>
...

It does compile and works as expected but the error is still there. Any idea how to solve this? Thanks a million.

Answer 1

Have you tried adding type information?

<DataWrapper v-slot="{ values }: { values: any }">
  data: {{ values }}
</DataWrapper>

https://www.typescriptlang.org/docs/handbook/variable-declarations.html#property-renaming

If you are using eslint you can also surround the DataWrapper with

<!-- eslint-disable -->
<!-- eslint-enable -->