metaInfo 失败 Gridsome - 打字稿

Question

我想使用带有 typescript 和 gridsome 的 Vuejs。

typescript 端的插件使用是gridsome-plugin-typescript。

这是我的<script>

<script lang='ts'>
  import Vue from "vue"

export default Vue.extend({
  metaInfo: {
      title: 'About us'
  }
})
</script>

我收到以下错误：

No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ metaInfo: { title: string; }; }' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
      Object literal may only specify known properties, and 'metaInfo' does not exist in type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'

似乎与不接受参数的插件有关。但不确定。

Answer 1

我似乎找到了正确的配置（vue-shims.d.ts）：

旧 - 错误配置

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}
declare module "vue/types/options" {
  interface ComponentOptions<V extends Vue> {
    metaInfo?: any;
  }
}

我在这里意识到有些奇怪的方式是因为在依赖项内部： node_modules/vue-meta/types/vue.d.ts 是做同样事情的声明。此外，同一文件中的 index.d.ts export default 和 literal-object.

更正的代码：

declare module "*.vue" {
  import * as Vue from "vue";
  export default Vue;
}

您现在看到声明 import * as Vue。

认为答案是正确的，但如果有反馈很高兴阅读它。

Answer 2

看看这个问题！这对你有帮助:)

How to use vue-meta in Vue TypeScript's template? · Issue #144 · nuxt/vue-meta