Type-safe translations do not work with keyPrefix

[Shaddix]

🐛 Bug Report

After setting up a type-safe translations and having a translation file like

{
  "home": {
    "admin_settings": "Admin settings",
  }
}

To Reproduce

The following thing works (and compiles)

  const b = useTranslation('translation');
  b.t('home.admin_settings');

But the following doesn't compile (typescript complains)

  const b = useTranslation('translation', { keyPrefix: 'home' });
  b.t('admin_settings');

Expected behavior

The latter examples compiles without errors

Your Environment

• i18next version: 21.2.4
• react-i18next version: 11.12.0
• os: Windows

[adrai]

@mdjastrzebski

[mdjastrzebski]

I wasn't aware of such feature. keyPrefix definitely needs to work with it. Would like to help, but unfortunately I won't be able to work on that in the next 2-3 weeks due to my workload.

[pedrodurek]

We also need to take into consideration the increase in compilation time with the implementation of keyPrefix. Perhaps, it may not be worth it, considering the benefit that it will bring (there are other tradeoffs).

[Shaddix]

Perhaps, it may not be worth it, considering the benefit that it will bring (there are other tradeoffs).

If this will not be implemented, then what are the alternatives to keep typecheck happy (if I'm indeed using the keyPrefix option)?

[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.

[jgreens]

This would be really helpful – commenting so this doesn't go stale

[pedrodurek]

I'll be taking a look, and measuring the compilation time. For now, the workaround is this:

const b = useTranslation('translation');
b.t('home.admin_settings');

// or

const b = useTranslation('translation');
const keyPrefix = 'home' as const;
b.t(`${keyPrefix}.admin_settings`);

[vladi-strilets]

Same issue here, it would be excellent to have that.
Also, making the own 'keyPrefix' to be type-safe would be great.

[gabesmithp]

Throwing my name in the hat as another dev that would love this fix 🙏 Thank you for working on this!

[pedrodurek]

I'll have a PR ready by end of the week, hopefully compilation time won't be affected much 🤞

[adrai]

Should we wait for the other PR before releasing a new version?

[pedrodurek]

yeah, we can hold off this one for now

[adrai]

fixed in v11.13.0

[adrai]

Thank you very much for your help @pedrodurek

[pedrodurek]

No problem 😄

[vladi-strilets]

It works as expected! Thanks, @pedrodurek

[Shaddix]

Thanks!

Just one case: for me it only works if keyPrefix is without a dot, I mean the following still errors:

// you can define a keyPrefix to be used for the resulting t function
const { t } = useTranslation('translation', { keyPrefix: 'very.deeply.nested' });
const text = t('key'); // "here"

(example is from documentation)

[vladi-strilets]

You are right @Shaddix, it would be great to also support nested key-prefixes.

[pedrodurek]

I'll look into it

[Shaddix]

@adrai could you please reopen the issue? Or should I create a separate one regarding nested keyPrefixes?

[adrai]

@adrai could you please reopen the issue? Or should I create a separate one regarding nested keyPrefixes?

@pedrodurek what do you prefer?

[pedrodurek]

I'm working on it, we can reopen for now

[chengsokdara]

after update from 11.12.0 to 11.13.0, typescript auto complete stop working.
please try the example no-namespace and just update react-i18next to 11.13.0, auto complete stop working.