TS: Can no longer assign translations directly in a setState() after version 12.0.0 bump

[MortenEmde]

🐛 Bug Report

Prior to v12.0.0 we could assign our translation directly to a setState of the use state hook like so:

const [state, setState] = useState('');

function myFunction() {
 setState(t('my-translated-text'));
}

After the version bump from v11 to v12 we unfortunately face the below error:
Argument of type 'DefaultTFuncReturn' is not assignable to parameter of type 'SetStateAction<string>'.

To Reproduce

Expected behavior

I would expect to be able to pass the TFunction directly to a setStateAction as in previous version.

We have found a workaround where can remove the error by wrapping the TFunction in a template string like so:

const [state, setState] = useState('');

function myFunction() {
 setState(`${t('my-translated-text')}`);
}

Is this now the intended way to pass translations to a setState hook after the latest type safety improvements?
Please feel free to point me towards the new documentation about hook interaction in case I missed it.

Your Environment

• runtime version: node v18
• i18next version: 22.0.4
• os: Mac

[adrai]

Did you follow: https://www.i18next.com/overview/typescript ?

[MortenEmde]

Please see this code sandbox triggering the same error:
https://codesandbox.io/s/xenodochial-fog-rim6wp?file=/src/App.tsx

I did indeed read through https://www.i18next.com/overview/typescript. But could unfortunately not find the fix needed for this issue.
Feel free to enlighten me if it is in the documentation and I am missing it.

[eridr]

There seems to be an issue with the updated types:

  <TKeys extends TFuncKey<N, TKPrefix> | TemplateStringsArray extends infer A ? A : never,
    TDefaultResult extends DefaultTFuncReturn = string,
    TInterpolationMap extends object = StringMap,
  >(
    key: TKeys | TKeys[],
  ): TFuncReturn<N, TKeys, TDefaultResult, TKPrefix>;

The return value from the t-function is no longer recognised as a string.

[kirill-linnik]

there are many related issues from people bumped to the version 22, so I'm surprised response is always the same :)

[adrai]

there are many related issues from people bumped to the version 22, so I'm surprised response is always the same :)

@pedrodurek is currently the only one trying to investigate and fix those things in his limited time... @kirill-linnik feel free to contribute and help

[pedrodurek]

Hey @MortenEmde, you need to type augment i18next in order to leverage t function fully type-safe, by doing that, you won't have this problem again. Please take a look at our examples: https://github.com/i18next/react-i18next/tree/master/example/react-typescript
For people who can't override the resources type because you can't get the translation files in build time, I'll create a PR to fix this later today.

[adrai]

should be fixed with i18next v22.0.5

[swkang0513]

should be fixed with i18next v22.0.5

This problem still occurs.

i18next 22.0.5
react-i18next 12.0.0

[dohomi]

I bumped into the issue as well:

i18next 22.0.5
react-i18next 12.0.0

I followed the TypeScript definitions as well.

[adrai]

t function can return null, this behaviour is set by default, if you want to change it, set returnNull type to false.

// i18next.d.ts
import 'i18next';

declare module 'i18next' {
  interface CustomTypeOptions {
    returnNull: false;
    ...
  }
}

I also recommend updating your i18next configuration to behave accordantly. https://www.i18next.com/overview/configuration-options#translation-defaults

i18next.init({
  returnNull: false,
   ...
});

[PutziSan]

t function can return null, this behaviour is set by default, if you want to change it, set returnNull type to false.

this fixes the issue for me.

This should be urgently mentioned in the documentation (https://www.i18next.com/overview/typescript), as this is the only way to restore the old behavior, and otherwise all react+TypeScript projects are probably unfixable if they don't want to type their keys.

[adrai]

https://www.i18next.com/overview/configuration-options#translation-defaults

[adrai]

https://www.i18next.com/overview/typescript#argument-of-type-defaulttfuncreturn-is-not-assignable-to-parameter-of-type-xyz

[MortenEmde]

Maybe I was a bit preemptive at closing this one.
Please see below code sandbox where the Argument of type 'DefaultTFuncReturn' is not assignable to parameter of type 'SetStateAction<string>'. still trigger with i18next bumped to 22.0.5 and the advised returnNull: false added.
https://codesandbox.io/s/xenodochial-fog-rim6wp?file=/src/App.tsx

[adrai]

probably because the translations are not typed.... @pedrodurek ?

[pedrodurek]

Hey @MortenEmde, you need to either, include i18next.d.ts in the tsconfig.json file:

"include": [
    "./src/**/*",
    "./i18next.d.ts"
],

or move the i18next.d.ts to the src path.

https://codesandbox.io/s/i18next-translation-in-setstate-forked-iyhgch?file=/tsconfig.json:6-72