Vue3 + Vite + Typescript：作用域插槽类型错误

Question

我有一个包含以下 devstack（Vue3、Vite、TypeScript）的项目，但出现以下错误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组件像这样将 props 注入到插槽中

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

它确实编译并按预期工作，但错误仍然存​​在。知道如何解决这个问题吗？太感谢了。

Answer 1

您是否尝试过添加类型信息？

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

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

如果您使用 eslint，您还可以将 DataWrapper 包围起来

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