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

【问题标题】：TS2749: 'XXX' refers to a value, but is being used as a type here. Did you mean 'typeof XXX'?TS2749：“XXX”指的是一个值，但在这里被用作一个类型。您的意思是“typeof XXX”吗？
【发布时间】：2021-07-07 08:15:49
【问题描述】：

我在运行使用Nuxt.js 开发的npm run dev 时遇到了一个非常奇怪的错误，该Vue.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 中的某种类型有关。

【问题讨论】：

当 TS 似乎完全能够推断出类型时，你为什么还要输入wrapper？
用于显式输入
输入是明确的 - 它来自@vue/test-utils。重复输入自己的代码感觉不对...
好吧，我已经删除了它以获得一个清晰的控制台。但是，如果可读性和文档的类型相同，我更喜欢使用显式类型，并且它不应该在控制台中引起任何问题。特别是，如果测试没有显示任何内容，而 npm run dev 显示。
运行良好的测试真的很奇怪，因为Wrapper<About> 确实不是有效的 TS 类型定义。 <> 内的任何东西都必须是 TS 类型 - About 不是 TS 类型，它实际上是一个值（Vue 组件定义对象）

标签： typescript vue.js nuxt.js typescript-typings vue-test-utils

【解决方案1】：

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

试试Wrapper<InstanceType<typeof About>>

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

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

【讨论】：

它澄清了，谢谢。大多数情况下，为了代码的可读性，我会尝试显式键入，但显然，我错了。
附言。 Wrapper<typeof About & Vue> 返回与问题中相同的问题:)
Wrapper<InstanceType<typeof About>> 工作
感谢@MauriciAbad