i18next: Map an array of objects in TypeScript

Question

I am rewriting a React project to TypeScript.

Packages: Next.js, next-i18next, styled-components

EDIT:

The answer is outdated as of current next-i18next versions.

Please refer to: Typescript i18next does not satisfy the constraint 'string | TemplateStringsArray NextJS

Quick Example:

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

I also made a codesandbox for this solution.

Original Question:

I used an array of objects in a language json file:

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

List all of them with i18next's { t }:

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

TypeScript underlined map:

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

Rewrote this with TypeScript:

type websiteProps = {
  map: Function;
};

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

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

This worked but I was wondering if I just 'put out' underlines for .map. Is there anything better I could do?

Thank you!

Answer 1

I don't know much about i18, but try using this instead:

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

This tells TypeScript that t will return an array of itemProps.

---

I was wondering if I just 'put out' underlines for .map

You should almost never suppress TypeScript's compiler errors. However, if you really must you can use // @ts-ignore on the line above.