Nuxt i18n：在 TypeScript 中使用 `nuxtI18nHead`

Question

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

以下来自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.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 的帮助！

Answer 2

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

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

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

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

Nuxt i18n：在 TypeScript 中使用 `nuxtI18nHead`

Nuxt i18n: Using `nuxtI18nHead` in TypeScript

typescript

nuxt.js

nuxt-i18n