React-i18next: Issue with TS 4.1 example & specific translations keys

[Thanaen]

🐛 Bug Report

Hi !
I've tried to apply the new TS 4.1 example, but it seems to break when a there is a key named "keys" in the translations file, like this:

en.json

{
  "home": {
    "menu": "I work fine",
    "keys": "I am not known by TypeScript :("
  }
}

To Reproduce

Here is a simple repo I used to reproduce this issue: https://github.com/Thanaen/repro-react-i18n-ts-bug
Simply clone it, run 'yarn' then 'yarn lint' or 'yarn start' !

Expected behavior

I should be able to call t('home.keys') without any linting or typescript errors.

Your Environment

• runtime version: Firefox 83 & Chrome 87
• i18next version: ^0.13.2
• os: Windows
• react-i18next: ^11.8.0

[Thanaen]

@pedrodurek Mentioning you because @jamuhl suggested it, and because you merged a TypeScript 4.1 related pull request recently!

[pedrodurek]

Hey @Thanaen, good catch! it turns out that in order to make it work with arrays like this:

{
  list: [{
    title: 'title1' 
  }, {
    title: 'title2' 
  }]
}

I'm omitting all props from Array (https://github.com/i18next/react-i18next/blob/master/src/ts4.1/index.d.ts#L45), and the key "keys" is one of them.
Thanks from flagging that! I'll see what I can do. In the meantime, I'd recommend using a different key for now.

[Thanaen]

Okay, @pedrodurek ! I'll try not to use this key for now ! 👍
Thank you for your quick response. :)

[stale[bot]]

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]

@jamuhl could you change the label to bug and typescript? I still need to work on this one. Thanks!

[pedrodurek]

Hey @Thanaen, it should be fixed now!  🙌
v11.8.5

[daniellwdb]

Once https://github.com/microsoft/TypeScript/issues/32063 becomes a thing, we would be able to infer the object keys for interpolation as well https://gist.github.com/pandaniell/a7000d31ec89436f4d4e4cf68ea88f0b
By creating a TypeScript Language Service plugin you could have live feedback even in JS projects with TS as dev dep by only providing a path to the translations in the tsconfig, been experimenting with that here (see gif in README) but it is not easy

[pedrodurek]

Niceee, thanks for sharing it @pandaniell

[pedrodurek]

@jamuhl could you close this task? Thanks!

[Thanaen]

Hi ! It took me a long time to answer, but thank you very much @pedrodurek for your work. :)

[pedrodurek]

@Thanaen No problem! Thank you too! 🙌