TFunction types, doesn't infer nested interpolation correctly

[reckter]

🐛 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

[adrai]

Probably we need some flatting of the passed interpolation object somewhere here: https://github.com/i18next/i18next/blob/master/typescript/t.d.ts#L133

[adrai]

feel free to try a PR... else we need to wait for @pedrodurek to have a look at it

[giovannipiller]

@reckter can you double check with the latest version? Right now it's 23.4.4

Yesterday I forked your example to make some tests for #2016 and today I noticed it didn't show any TS error when upgrading its dependencies.
https://codesandbox.io/s/react-i18next-typescript-code-sandbox-forked-9pcnl8?file=/src/App.tsx

[reckter]

@giovannipiller I still have the same issue in my project. (originaly with 23.4.1, but also with 23.4.4)

I forked your sandbox again (fork-caption), and it seems it doesn't show errors at all even if I supply completely the wrong object altogether: https://codesandbox.io/s/react-i18next-typescript-code-sandbox-forked-ktvtd3?file=/src/App.tsx
(or missing keys, so I suspect something else is off here.)

[reckter]

I had a quick look at the changes in 23.4.0 (first version, where the sandbox doesn't work anymore)
and my guess would be at this change: https://github.com/i18next/i18next/pull/2006/files#diff-7aa4473ede4abd9ec099e87fec67fd57afafaf39e05d493ab4533acc38547eb8R926

But without knowing the ins and outs of that section, it's just a guess. Maybe that helps :)

[adrai]

I had a quick look at the changes in 23.4.0 (first version, where the sandbox doesn't work anymore)

and my guess would be at this change: https://github.com/i18next/i18next/pull/2006/files#diff-7aa4473ede4abd9ec099e87fec67fd57afafaf39e05d493ab4533acc38547eb8R926

But without knowing the ins and outs of that section, it's just a guess. Maybe that helps :)

@pedrodurek possible?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[pedrodurek]

I'll look into it this week

[OleksiiKachan]

any updates on this?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[adrai]

@marcalexiei do you have an idea why this behaves like that?

[marcalexiei]

InterpolationMap provides the union of strings wrapped between
CustomOptions#InterpolationPrefix and CustomOptions#InterpolationSuffix from a given string.

i18next/typescript/t.d.ts

Lines 137 to 146 in 2f3384b

	type ParseInterpolationValues<Ret> =
	Ret extends `${string}${_InterpolationPrefix}${infer Value}${_InterpolationSuffix}${infer Rest}`
	?
	| (Value extends `${infer ActualValue},${string}` ? ActualValue : Value)
	| ParseInterpolationValues<Rest>
	: never;
	type InterpolationMap<Ret> = Record<
	$PreservedValue<ParseInterpolationValues<Ret>, string>,
	unknown
	>;

---

E.g.:

To solve the issue the code of InterpolationMap should be updated to generate mapped types from the keys.

---

I can try to setup a PR to fix this issue in the upcoming days

[adrai]

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

[marcalexiei]

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

[adrai]

should be addressed with v23.9.0