Nuxt / Vue.js in TypeScript: Object literal may only specify known properties, but 'components' does not exist in type 'VueClass'

Question

我不太清楚为什么在使用带有组件和中间件的装饰器时收到此错误消息：

经检查，错误如下： TS2345: Argument of type '{ components: { Test: typeof Nav; }; middleware: string[]; }' is not assignable to parameter of type 'VueClass'. Object literal may only specify known properties, but 'components' does not exist in type 'VueClass'. Did you mean to write 'component'?

没有中间件，@Component 装饰器不再大惊小怪：

知道为什么会这样吗？

Answer 1

我看到 middleware 是一个 property defined by Nuxt 而不是标准的 Vue 属性。

错误消息有点误导 - 它看起来像是在说 components 属性 有问题，但它实际上是说 的对象both {components: ..., middleware: ...} 与任何预期类型都不匹配。

解决方法：

您需要做的是更新 Vue ComponentOptions 类型的定义以添加 middleware 属性.

为此，创建一个新的 .d.ts 文件（或编辑现有的类型文件，例如 references.d.ts）并向其中添加此声明：

// references.d.ts
/**
 * Extends interfaces in Vue.js
 */

import Vue, { ComponentOptions } from "vue";

declare module "vue/types/options" {
  interface ComponentOptions<V extends Vue> {
    // This adds the `middleware` property to the existing `vue/types/options/ComponentOptions` type
    middleware?: string | string[];
  }
}

这只是 Vuex 插件如何将 store 属性 添加到 Vue 组件类型的一种变体。请参阅 vuex/types/vue.d.ts source) 了解这是如何完成的。