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

Question

当运行我的 npm run dev 使用 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 类型推断感觉像是很多不必要的工作。为此，您应该学习和理解 typings

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

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

TS2749: 'XXX' refers to a value, but is being used as a type here. Did you mean 'typeof XXX'?

typescript

vue.js

nuxt.js

typescript-typings

vue-test-utils