i18next：在 TypeScript 中映射对象数组

Question

我正在用 TypeScript 重写一个 React 项目。

包：Next.js、next-i18next、styled-components

编辑：

答案在当前 next-i18next 版本中已过时。

请参考：

快速示例：

{t<string, ItemProps[]>('document.items', {returnObjects: true}).map(({ name, description, index }) => (
  <li key={index}>
    <strong dangerouslySetInnerHTML={{__html: name}} />
    <Paragraph dangerouslySetInnerHTML={{__html: description}} />
  </li>
   )
)}

我也为这个解决方案做了一个codesandbox。

原问题：

我在语言 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) => ( ... ))

这行得通，但我想知道我是否只是 'put out' 为 .map 添加了下划线。我还能做些什么吗？

谢谢！

Answer 1

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

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

这告诉 TypeScript t 将 return 一个 itemProps.

的数组

I was wondering if I just 'put out' underlines for .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 默认为“string”。

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

既然你确定你应该得到一个项目数组，你需要明确指定 TResult 类型参数，就像@cherryblossom 指出的那样：

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

顺便说一句，您正在使用的库的类型定义在解决此类问题时非常有用。请始终先检查此类情况。

i18next：在 TypeScript 中映射对象数组

i18next: Map an array of objects in TypeScript

typescript

next.js

react-i18next