Vue3 + Vite + Typescript：Scoped slots 类型错误答案

【问题标题】：Vue3 + Vite + Typescript: Scoped slots type errorVue3 + Vite + Typescript：Scoped slots 类型错误
【发布时间】：2023-02-21 17:00:24
【问题描述】：

我有以下 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>
...

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

【问题讨论】：

你在哪里看到错误？ VS代码？如果是这样，请确保您使用的是 Volar 扩展（而不是 Vetur）。
这是我在没有 stackoverflow 解决方案的情况下遇到的第一个 Vue3/Typescript ‘any’ 错误，我不愿意改变严格级别只是为了让这个微小的编译。
哦！刚刚意识到，也许有一种方法可以非常有针对性地使用 //@ts-ignore ..
@sol 我无法在这个repo 中重现这个问题。你能分享一个问题重现的链接吗？
@sol，恕我直言，悬赏这个问题不太可能为您提供好的答案。这个问题缺乏上下文，我们无法知道 DataWrapper 的样子（如果它是一个自定义组件，如果它是一个库，什么版本的库，等等）。在这种情况下，唯一的解决方案是 any、any[] 或 unknown[]，这真的不是一个很好的解决方案。通过提出一个包含所有必要细节的单独问题，您有更多机会获得好的答案。当前问题的唯一可能答案是：禁用 TS。

标签： typescript vue.js vuejs3 vite

【解决方案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 -->

【讨论】：

【解决方案2】：

有两种选择：

对整个 Vue 文件禁用 ESLint 检查
/* eslint-disable @typescript-eslint/no-explicit-any */

将其编写为渲染函数，这样：

<template>
  <router-view
    v-slot="{Component}"
  >
    <transition
      name="fade"
      mode="out-in"
    >
      <component
        :is="Component"
        :key="$route.path"
      />
    </transition>
  </router-view>
</template>

变成这样：

<template>
  <render />
</template>
<script setup lang="ts">
import {h, Transition} from "vue";
import {RouterView, useRoute} from "vue-router";
import type {VNode} from "vue";

const route = useRoute();
const render = () => {
  return h(RouterView, null, {
    default: ({Component}: {Component: VNode}) => {
      return h(Transition, {name: 'fade', mode: 'out-in'}, [
        h(Component, {key: route.path}),
      ]);
    },
  });
};
</script>

【讨论】：