typescript - Nuxt i18n：在 TypeScript 中使用 `nuxtI18nHead`

Question

我正在努力使用nuxtI18nHeadTypeScript，我应该怎么做才能避免这个错误？

以下来自default.vue

代码：

import MainNavbar from '~/components/MainNavbar.vue'

export default {
  components: { MainNavbar },
  head (): any {
    return this.$nuxtI18nHead({ addSeoAttributes: true })
  }
}

错误：

 ERROR  ERROR in layouts/default.vue:18:17                                                                                                                                                 21:34:24
TS2339: Property '$nuxtI18nHead' does not exist on type '{ components: { MainNavbar: ExtendedVue<Vue, unknown, unknown, unknown, Record<never, any>>; }; head(): any; }'.
    16 |   components: { MainNavbar },
    17 |   head (): any {
  > 18 |     return this.$nuxtI18nHead({ addSeoAttributes: true })
       |                 ^^^^^^^^^^^^^
    19 |   }
    20 | }
    21 |

Answer 1

处理这个问题的最好方法是创建一个全局 Vue 类型 shim，这样就不需要Vue.extend在所有 Vue 组件中显式地显示。

创建一个类似types/vue-shim.d.ts内容的文件：

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

另请参阅https://typescript.nuxtjs.org/guide/setup，其中记录了此和其他与打字稿相关的设置步骤。

Answer 2

我通过使用解决了这个问题Vue.extend({})，出于某种原因，我认为您不允许在default.vue文件中使用它。

import Vue from 'vue'
import MainNavbar from '~/components/MainNavbar.vue'

export default Vue.extend({
  components: { MainNavbar },
  head (): any {
    return this.$nuxtI18nHead({ addSeoAttributes: true })
  }
})

感谢@Kapcash 的帮助！