i18next：在 TypeScript 中映射对象数组

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

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

EDIT:

截至目前，答案已过时next-i18next版本。

请参阅：Typescript i18next 不满足约束 'string |模板字符串数组 NextJS https://stackoverflow.com/questions/69225989/typescript-i18next-does-not-satisfy-the-constraint-string-templatestringsarra

简单示例：

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

我还做了一个代码沙箱 https://codesandbox.io/s/react-i18next-typescript-array-example-5xdzk?file=/pages/index.tsx对于这个解决方案。

原问题：

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

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

用 i18next 列出所有这些{ t }:

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

带下划线的 TypeScriptmap:

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。 我还能做些什么更好的事情吗？

谢谢你！

@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(...)

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