i18next: TFunction types, doesn't infer nested interpolation correctly

πŸ› Bug Report

The TFunction types, do not correctly allow nested interpolation objects.

Example

t("texts.your-browser-supported", {
	browser: {
		family: "family",
		version: "version,
	}
})

will not work, it will produce the error:

 Argument of type '["texts.your-browser-unsupported", { browser: { family: string; version: string; }; }]' is not assignable to parameter of type '[key: "texts.your-browser-unsupported" | "texts.your-browser-unsupported"[], options?: ({ readonly browser: { family: string; version: string; }; } & InterpolationMap<"Your browser ({{browser.family}} {{browser.version}}) is not supported.">) | undefined] | [key: ...] | [key: ...]'.
  Type '["texts.your-browser-unsupported", { browser: { family: string; version: string; }; }]' is not assignable to type '[key: string | string[], defaultValue: string, options?: ({ readonly browser: { family: string; version: string; }; } & $Dictionary) | undefined]'.
    Type at position 1 in source is not compatible with type at position 1 in target.
      Type '{ browser: { family: string; version: string; }; }' is not assignable to type 'string'.

38       {t("texts.your-browser-unsupported", {
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
39        browser: browser,
   ~~~~~~~~~~~~~~~~~~~~~~~~
40       })}
   ~~~~~~~

but with

t("texts.your-browser-supported", {
	"browser.family": "browser.family",
	"browser.version": "browser.version",
})

it will work.

To Reproduce

Codesandbox, with the code above: https://codesandbox.io/s/react-i18next-typescript-code-sandbox-forked-gg6x7q?file=/src/App.tsx

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 5
  • Comments: 15 (9 by maintainers)

Most upvoted comments

Do you think this will slow down the performance a lot?

I don’t think so, but I’ll try to make some test

Can you prepare a PR?

Yes, I’ll try to do it in the upcoming days