Nuxt 应用程序中“类型 X 上不存在属性‘$i18n’”

Question

我正在用 TypeScript 编写 Nuxt 应用程序。我在尝试访问 Nuxt 上的 $i18n 对象时遇到了问题。我在 VS Code 中收到一条警告：

Property '$i18n' does not exist on type 'MyClass'.

我的组件代码中的脚本部分如下所示：

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import ILocale from '~/types/vue/Locales'

  @Component
  export default class MyClass extends Vue {
    @Prop({ type: Boolean, default: true }) showLanguageSwitch!: boolean

    get availableLocales(): ILocale[] {
      return this.$i18n.locales.filter((l) => l.code !== this.$i18n.locale)
    }
  }
</script>

我在项目的根目录中有一个填充文件：

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

这是我应该扩展接口的地方吗？我实际上如何做到这一点，因为Vue它不是 TS 接口，而是具有自己类型的类定义。

到目前为止唯一有效的方法是明确添加一个私有财产MyClass，但随后它抱怨缺乏初始化，而且无论如何感觉都是错误的。Vue 的所有其他常见属性都可以被 TS 识别，例如 $fetch、$config 等。

TS配置：

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

Nuxt配置：

export default {
  head: {
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },
  publicRuntimeConfig: {},
  css: [
    '~assets/scss/fonts.scss',
    '~assets/scss/variables.scss',
    '~assets/scss/mixins.scss',
    '~assets/scss/reset.scss',
    '~assets/scss/typography.scss',
  ],
  i18n: {
    lazy: true,
    langDir: 'i18n/',
    locales: [
      {
        code: 'en',
        iso: 'en',
        file: 'en.json',
        name: 'English',
      },
      {
        code: 'de-DE',
        iso: 'de-DE',
        file: 'de.json',
        name: 'Deutsch',
      },
    ],
    defaultLocale: 'en',
    vueI18n: {
      fallbackLocale: 'en',
    },
    seo: true,
    strategy: 'prefix_except_default',
  },
  plugins: ['~/plugins/jsonld', '~/plugins/helpers'],
  components: true,
  buildModules: ['@nuxtjs/eslint-module', '@nuxt/typescript-build'],
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/style-resources',
    'nuxt-i18n',
    '@nuxtjs/sitemap',
  ],
  axios: {},
  server: {
    port: 3000,
    host: '0.0.0.0',
  },
  router: {
    middleware: ['langRedirect', 'seoMiddleware'],
    trailingSlash: true,
  },
  serverMiddleware: [
    '~/server-middleware/redirectApex.js',
    { path: '/api', handler: '~/server-middleware/rest.js' },
  ],
  build: {},
  styleResources: {
    scss: [
      '~assets/scss/fonts.scss',
      '~assets/scss/variables.scss',
      '~assets/scss/mixins.scss',
      '~assets/scss/reset.scss',
      '~assets/scss/typography.scss',
    ],
  },
}

（编辑）加载nuxt-18n类型后现在正确的功能：

get availableLocales(): NuxtVueI18n.Options.LocaleObject[] {
  if (!this.$i18n.locales) {
    return []
  }

  return (this.$i18n.locales as NuxtVueI18n.Options.LocaleObject[]).filter(
    (l) => l.code !== this.$i18n.locale
  )
}

Answer 1

在tsconfig.json添加"nuxt-i18n"类型条目中：

    "types": [
      "@types/node",
      "@nuxt/types",
       "nuxt-i18n"
    ]