i18next: Typescript Error: accessing array entry does not comply to key type

🐛 Bug Report

According to what it says here: https://www.i18next.com/translation-function/objects-and-arrays, the following code should be valid in a react+typescript environment,

const result1 = i18next.t('arrayJoin', { joinArrays: '+' });
// -> "line1+line2+line3"

const result2 = i18next.t('arrayJoinWithInterpolation', { myVar: 'interpolate', joinArrays: ' ' });
// -> "you can interpolate"

const result3 = i18next.t('arrayOfObjects.0.name');
// -> "tom"

but in reality, this:

const result3 = i18next.t('arrayOfObjects.0.name');

returns a TS error:

src/App.tsx:12:29 - error TS2345: Argument of type '["arrayOfObjects.0.name"]' is not assignable to parameter of type '[key: "arrayJoin" | TemplateStringsArray | "arrayJoinWithInterpolation" | "arrayOfObjects" | "translation:arrayJoin" | "translation:arrayJoinWithInterpolation" | "translation:arrayOfObjects" | ("arrayJoin" | ... 5 more ... | "translation:arrayOfObjects")[], options?: (TOptionsBase & ... 1 more ... & InterpolationMap...'.
  Type '["arrayOfObjects.0.name"]' is not assignable to type '[key: "arrayJoin" | TemplateStringsArray | "arrayJoinWithInterpolation" | "arrayOfObjects" | "translation:arrayJoin" | "translation:arrayJoinWithInterpolation" | "translation:arrayOfObjects" | ("arrayJoin" | ... 5 more ... | "translation:arrayOfObjects")[], options?: (TOptionsBase & ... 1 more ... & InterpolationMap...'.
    Type at position 0 in source is not compatible with type at position 0 in target.
      Type '"arrayOfObjects.0.name"' is not assignable to type '"arrayJoin" | TemplateStringsArray | "arrayJoinWithInterpolation" | "arrayOfObjects" | "translation:arrayJoin" | "translation:arrayJoinWithInterpolation" | "translation:arrayOfObjects" | ("arrayJoin" | ... 5 more ... | "translation:arrayOfObjects")[]'. Did you mean '"arrayOfObjects"'?

12   const result3 = i18next.t('arrayOfObjects.0.name');
                               ~~~~~~~~~~~~~~~~~~~~~~~

To Reproduce

https://github.com/sreucherand/react-i18next/tree/master/example/react-typescript/simple

yarn
yarn typechecks

About this issue

  • Original URL
  • State: closed
  • Created 9 months ago
  • Comments: 17 (12 by maintainers)

Most upvoted comments

Yes it does solve my problem! Thank you so much!

@sreucherand I do believe the issue you demonstrated in the sandbox is solved with v23.7.15 - could you verify if your actual use case is working now, too?

Hey @pedrodurek, did you manage to reproduce the issue using @sreucherand s example? Or are you still missing some information I could try to help provide? (No pressure tho. As much as I’d like to see this issue fixed, I am well aware that you might have a different priority. I just thought I’d check in to make sure if there’s anything I could do to try to help with this. 🙂 )

@pedrodurek I’m using “as const” here but anyway, I put up a new example based on your code sandbox to illustrate my point: https://codesandbox.io/s/18n-basic-example-2-forked-7lgxrf?file=/src/App.tsx

See the error that come up: image

Seems like in a TS env, you’re not able to use the syntax array.index as described in the documentation.