React-i18next: TypeScript 4.1 types no longer allow fallback keys

[BenJenkinson]

💥 Regression Report

The t(..) translation function provided by the useTranslation() hook should accept an array of fallback keys.

This no longer works with the new Typescript 4.1 types.

Documentation

For example (taken from the i18next documentation here:
https://www.i18next.com/translation-function/essentials#multiple-fallback-keys):

// const error = '404';
i18next.t([`error.${error}`, 'error.unspecific']); // -> "The page was not found"

// const error = '502';
i18next.t([`error.${error}`, 'error.unspecific']); // -> "Something went wrong"

Last working version

Worked up to version: 11.7.3

Stopped working in version: 11.8.0

To Reproduce

The following code will now produce a type/build error:

const { t } = useTranslation("exampleNamespace");

const message = t(["a", "b"]);

Argument of type 'string | string[]' is not assignable to parameter of type 'string'.
  Type 'string[]' is not assignable to type 'string'.

Expected behavior

The code does not produce a type/build error :)

[adrai]

//cc: @pedrodurek

[Him-2C]

same problem to me
https://github.com/i18next/react-i18next/issues/1217

[BenJenkinson]

It is another type error, at build time, but it's for a slightly different reason to yours, @Him-2C

Your error seems to be due to the TFunctionResult type being a string[], causing your type error:

 Type 'string[]' is not assignable to type 'string'.

This issue is due to the arguments accepted by the TFunction type, throwing the (pretty similar, but different) type error, in a different location:

 Type 'string' is not assignable to type 'string[]'.

[pedrodurek]

Hey @BenJenkinson, it should be fixed now in v11.8.2.

[BenJenkinson]

Hi @pedrodurek, thanks, the fix you made in 9d339d3 has resolved this for me 👍