nuxt-i18n：Lang Switcher 错误“对象可能是‘未定义’答案

【问题标题】：nuxt-i18n: Lang Switcher Error "Object is possibly 'undefined'nuxt-i18n：Lang Switcher 错误“对象可能是‘未定义’
【发布时间】：2021-03-11 18:27:43
【问题描述】：

我想用 nuxt-i18n 插件在我的 nuxt 应用上构建一个语言切换器。重要的是，我使用的是 TypeScript 而不是 JavaScript。

在文档 (https://i18n.nuxtjs.org/lang-switcher) 中，我在我的导航栏组件中实现了以下代码：

TheNavbar.vue

<template>
  <nav class="navbar">
    <div class="container">
      <div>
        <NuxtLink
          v-for="locale in availableLocales"
          :key="locale.code"
          :to="switchLocalePath(locale.code)">{{ locale.name }}
        </NuxtLink>
      </div>
    </div>
  </nav>
</template>

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

export default Vue.extend({
  name: "TheNavbar",
  computed: {
    availableLocales() {
      return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale);
    }
  }
})

在我的应用程序中，此解决方案有效。但是控制台打印出以下两个错误：

 ERROR  ERROR in src/components/shared/TheNavbar.vue:25:14                                                                                                                                                       18:49:05
TS2532: Object is possibly 'undefined'.
    23 |   computed: {
    24 |     async availableLocales() {
  > 25 |       return this.$i18n.locales.filter(i => i?.code !== this.$i18n.locale);
       |              ^^^^^^^^^^^^^^^^^^
    26 |     }
    27 |   }
    28 | })


ERROR in src/components/shared/TheNavbar.vue:25:48
TS2339: Property 'code' does not exist on type 'string | LocaleObject'.
  Property 'code' does not exist on type 'string'.
    23 |   computed: {
    24 |     async availableLocales() {
  > 25 |       return this.$i18n.locales.filter(i => i?.code !== this.$i18n.locale);
       |                                                ^^^^
    26 |     }
    27 |   }
    28 | })

我在 nuxt.config.js 中的 i18n 配置：

  i18n: {
    locales: [
      {
        code: 'de',
        name: 'Deutsch',
      },
      {
        code: 'en',
        name: 'English'
      }
    ],
    defaultLocale: 'de',
    vueI18n: {
      fallbackLocale: 'de',
      messages: {
        de: {
          welcome: 'Willkommen'
        },
        en: {
          welcome: 'Welcome'
        }
      }
    }
  },

【问题讨论】：

标签： typescript nuxt.js vue-i18n nuxt-i18n

【解决方案1】：

要消除这些错误，请将 ! 后缀表达式运算符添加到 this.$i18n.locales，因为它不会是 null 或 undefined，并告诉 typescript i 可以是任何东西：

public get availableLocales(): any {
  return this.$i18n.locales!.filter(i => (i as any).code  !== this.$i18n.locale)
}

编辑：21 年 4 月 9 日

如果您使用的是当前版本的 Nuxt (v2.15.4)，这是工作代码：

public get availableLocales(): any {
  return ((this.$i18n.locales as (string | number)[])).filter((i: any) => i.code !== this.$i18n.locale)
}

【讨论】：

【解决方案2】：

由于我刚刚开始深入了解 TS，我遇到了类似的问题：我试图在 computed 中访问 this.$store.*。我认为根本问题是相同的。

“Vuex 没有提供有用的类型来从你的应用程序访问商店。this.$store 在 Nuxt 应用程序中保持无类型。” - Nuxt docs

我猜 i18n 也没有。

文档给出的建议是创建您自己的类型或找到一个打字插件。

// -- components/MyComponent.vue

<script lang="ts">

import { Component, Vue } from 'nuxt-property-decorator'
import { getters, RootState } from '~/store'

@Component
export default class MyComponent extends Vue {
    get myThings() {
        return (this.$store.state as RootState).things
    }

    mounted() {
        const name = this.$store.getters['name'] as ReturnType<typeof getters.name>
    }
}

【讨论】：

【解决方案3】：

试试这个：

<NuxtLink
   v-if="availableLocales"
   v-for="locale in availableLocales"
   :key="locale.code"
   :to="switchLocalePath(locale.code)">{{ locale.name }}
</NuxtLink>

【讨论】：