TS2749：“XXX”指的是一个值，但在这里用作类型。您指的是“typeof XXX”吗？

Question

npm run dev在运行我开发的 using时，我遇到了一个非常奇怪的错误Nuxt.js，它有Vue.js组件。也就是说，在运行应用程序时，我看到与TypeScript诸如相关的错误TS2749: 'About' refers to a value, but is being used as a type here. Did you mean 'typeof About'?，即使npm run test没有显示任何内容。

我的spec.ts文件带有抱怨行

import { shallowMount, Wrapper } from "@vue/test-utils";    
import About from "@/pages/about.vue";

describe("About", () => {
  const wrapper: Wrapper<About> = shallowMount(About); // <-- Complaining line
  ...
}

在设置打字之前突出显示时，类型应该没问题，它显示了下面的类型。

建议的解决方案会const wrapper: Wrapper<typeof About> = shallowMount(About);生成另一个TypeScript错误，导致测试无法编译。即，TS2344: Type 'ExtendedVue<Vue, unknown, unknown, { setLocation: any; }, unknown>' does not satisfy the constraint 'Vue'. Type 'VueConstructor<{ setLocation: any; } & Vue>' is missing the following properties from type 'Vue': $el, $options, $parent, $root, and 32 more.

我不知道为什么test是沉默的，而TypeScript在本地运行应用程序时开始抱怨测试本身。顺便说一句，它们都通过了，并且应用程序可以编译。它只是与TypeScript中的某种类型的输入有关@vue/test-utils。

Answer 1

Wrapper<About>这确实是一个问题 - 这是 TS 类型定义，而About不是 TS 类型...它实际上是一个值（Vue 组件定义对象）。

尝试Wrapper<InstanceType<typeof About>>

显式声明来自外部库的类型（带有类型）并且实际上忽略 TS 类型推断感觉像是很多不必要的工作。为此，您应该研究并理解打字

...坦率地说，我并不完整...所以上面的代码可能是错误的:)