Question

我正在将React项目重写为TypeScript。

包装：Next.js，next-i18next，样式化组件

我在语言json文件中使用了一组对象：

{
  "websites":
  [
    {
      "slug": "website-a",
      "name": "Website A"
    },
    {
      "slug": "website-b",
      "name": "Website B"
    }
  ]
}

使用i18next的{ t }列出所有这些文件：

t('websites', {returnObjects: true}).map(({slug, name}) => ( ... ))

TypeScript带下划线map：

Property 'map' does not exist on type 'string'.

用TypeScript重写：

type websiteProps = {
  map: Function;
};

type itemProps = {
  slug: string;
  name: string;
};

t<websiteProps>('websites', {returnObjects: true}).map(({slug, name}: itemProps) => ( ... ))

这有效，但是我想知道我是否只是为.map下划线。有什么我可以做的更好的吗？

谢谢！

Answer 1

我对i18不太了解，但是请尝试使用它：

t<itemProps[]>('websites', {returnObjects: true}).map(({slug, name}: itemProps) => ( ... ))

这告诉TypeScript t将返回itemProps的数组。

我想知道我是否只为.map
下划线

几乎永远不要抑制TypeScript的编译器错误。但是，如果确实需要，可以在上面的行中使用// @ts-ignore。

Answer 2

@cherryblossom的答案是正确的-我正在发布新的答案，以帮助提供更多细节。

这是基本的i18n t函数的类型定义（供您的代码使用）：

  <
    TResult extends TFunctionResult = string,
    TKeys extends TFunctionKeys = string,
    TInterpolationMap extends object = StringMap
  >(
    key: TKeys | TKeys[],
    options?: TOptions<TInterpolationMap> | string,
  ): TResult;

这是一个通用函数，可以将TResult，Tkeys和TInterpolationMap作为选项。如我们所见，在没有任何类型参数的情况下，TResult默认为“字符串”。

字符串类型没有.map函数，因此会出现错误。

由于您确定应该返回项目数组，因此需要显式指定TResult类型参数，例如指示的@cherryblossom：

t<itemProps[]>('websites', {returnObjects: true}).map(...)

顺便说一句，在解决此类问题时，正在使用的库的类型定义非常有用。对于此类情况，请务必先进行检查。

i18next：在TypeScript中映射对象数组

2 个答案: