如何解决Vue i18n中数组属性不被TypeScript识别的错误？

2024-07-11 01:06:05

如何解决 Vue i18n 中数组属性不被 TypeScript 识别的错误

在使用 Vue i18n 为你的 Vue 项目添加多语言支持时，你可能会遇到 TypeScript 无法识别翻译数组中属性的问题。具体来说，即使翻译内容在页面上正确显示，TypeScript 仍然会抛出类似 "Property 'xxx' does not exist on type 'never'" 的错误。如果你正在使用 Quasar 框架，并使用了其提供的 $tm 方法来简化翻译流程，这个问题可能会更加突出。

本文将深入分析这个问题的根源，并为你提供两种有效的解决方案，帮助你摆脱烦人的 TypeScript 错误，提升开发效率。

问题根源：TypeScript 类型推断与 Vue i18n 的冲突

这个问题的根源在于 TypeScript 的类型推断机制与 Vue i18n 的工作方式之间存在微妙的冲突。

假设我们有一个包含联系人信息的数组，需要将其翻译成不同的语言：

const contacts = [
  {
    title: 'Health & safety',
    person: {
      name: 'Mike',
    },
  },
  {
    title: 'IT Support',
    person: {
      name: 'Bob',
    },
  },
];

const translatedContacts = contacts.map((contact) => ({
  ...contact,
  title: this.$t(contact.title),
  person: {
    ...contact.person,
    name: this.$t(contact.person.name),
  },
}));

我们期望 translatedContacts 数组中的每个元素都包含 title 和 person.name 属性，并且这些属性的值已经被翻译成目标语言。然而，由于 Vue i18n 的 $t 方法返回类型为 string，TypeScript 无法推断出 translatedContacts 数组的具体类型，只能将其推断为 never[]，即一个空数组。

因此，当你尝试访问 translatedContacts 数组元素的 title 或 person.name 属性时，TypeScript 会抛出错误，因为它认为这些属性并不存在。

解决方案一：使用类型断言

解决这个问题最直接的方法是使用类型断言，明确告诉 TypeScript $tm('contacts') 的返回值类型。

例如，在 Quasar 框架中，我们可以使用以下代码来渲染翻译后的联系人列表：

<q-card
  v-for="contact in $tm('contacts') as Array<{ title: string; person: { name: string } }>"
  :key="contact.title"
>
  <q-card-section>
    <div>{{ contact.title }}</div>
    <div>{{ contact.person.name }}</div>
  </q-card-section>
</q-card>

通过 as ，我们将 $tm('contacts') 断言为一个包含特定类型对象的数组。在这个例子中，我们断言数组中的每个元素都包含 title 和 person.name 属性，并且它们的类型都是 string。这样一来，TypeScript 就能正确识别这些属性，不再报错。

类型断言提供了一种快速解决问题的方案，但它也有一些缺点。首先，类型断言相当于绕过了 TypeScript 的类型检查，如果断言的类型与实际类型不符，可能会导致运行时错误。其次，类型断言的代码可读性较差，尤其是在处理复杂数据结构时。

解决方案二：创建自定义类型

为了提高代码的可读性和可维护性，我们可以创建一个自定义类型来翻译后的数据结构。

首先，定义一个接口来单个联系人的类型：

interface Contact {
  title: string;
  person: {
    name: string;
  };
}

然后，在组件中使用该类型：

import { defineComponent } from 'vue';
import { Contact } from './types';

export default defineComponent({
  // ...
  computed: {
    translatedContacts(): Contact[] {
      return (this.$tm('contacts') as Contact[]).map((contact) => ({
        ...contact,
        title: this.$t(contact.title),
        person: {
          ...contact.person,
          name: this.$t(contact.person.name),
        },
      }));
    },
  },
});

在这个例子中，我们创建了一个名为 Contact 的接口，它描述了单个联系人的类型。然后，我们在 translatedContacts 计算属性中使用 Contact[] 类型来声明返回数组的类型。最后，我们使用类型断言将 this.$tm('contacts') 的返回值转换为 Contact[] 类型，以确保类型安全。

使用自定义类型可以提高代码的可读性和可维护性，因为它将类型信息集中管理，并且可以方便地在项目中复用。