React-i18next: Correct type when using `t()`

[DevanB]

Hey! 👋

First, thanks for a great library!

I'm using react-i18next with TypeScript while building a component library for my employer. I'm curious what the correct type declaration would be when using the t() function. Here is an example component:

<StyledInput id={id} placeholder={placeholder} {...props}/>

My props interface is:

export interface StyledInputProps {
  id: string
  placeholder:
    | string
    | InferableComponentEnhancerWithProps<"t">
    | InferableComponentEnhancerWithProps<"t"> & string;
}

This seems a bit verbose, and actually conflicts with the standard HTML placeholder definition, which leads me to believe I'm doing it incorrectly.

Any thoughts would be appreciated! Thanks! 😄

[jamuhl]

Sorry. Won't be much of a help...not using and won't ever use typescript. You might get more help over at stackoverflow - at least more people will see it there. Will keep this open for some weeks in the hope someone using typescript can be of help. Sorry again.

[ramonitor]

@DevanB , I'm not sure what you mean with the placeholder type, but the correct type for the t() function can be found in the InjectedTranslateProps interface which can be imported from 'react-i18next'. Is that what you mean?

[DevanB]

@ramonitor This helps so much! I didn't realize InjectedTranslateProps was an exported interface I can extend.

While I have your attention, do you have an example of correctly using the Trans component in TS? I'm doing something to the likes of:

<Trans
  i18nKey="calculator.employees-with-benefits-question"
  employees={this.state.numberOfEmployees}
>
  Out of {{ employees }} employees, how many receive health benefits?
</Trans>

However, TS doesn't like that employees isn't defined in the props for the Trans component, and isn't a value when used. I might be using the component incorrectly all together.

@jamuhl Thanks for keeping this issue open despite your sentiment on TS! 😄

[ramonitor]

@DevanB Just got my first Trans component working after some trouble myself so at this moment I'm not exactly sure how it works. As far as I known you can only specify the props defined in the TransProps interface to the Trans component. Maybe you can use the values prop for this, not sure.

[DevanB]

@ramonitor I looked at the interface and notices the values prop, but haven't gotten it working correctly, still.

[jamuhl]

no need to add it to Trans props:

The Trans works like:

const { numberOfEmployees }  = this.state;

<Trans
  i18nKey="calculator.employees-with-benefits-question"
>
  Out of {{ numberOfEmployees }} employees, how many receive health benefits?
</Trans>

// or

<Trans
  i18nKey="calculator.employees-with-benefits-question"
>
  Out of {{ employees: this.state.numberOfEmployees }} employees, how many receive health benefits?
</Trans>

[DevanB]

@jamuhl Oh! I wondered this also. So the translation string would be something like?:

"employees-with-benefits-question": "Out of {{employees}} employees, how many receive health benefits?",

[jamuhl]

yes...you will see it in console -> using debug true (missing key)

Or use https://locize.com with the i18next-locize-backend and it gets added to your translation project automatically.

Just to note, in your current code there is no need to use Trans, as this is the same:

{t('employees-with-benefits-question', { employees: this.state.numberOfEmployees })}

would be different if you use some thing like string formatting:

<Trans
  i18nKey="calculator.employees-with-benefits-question"
>
  Out of <strong>{{ employees: this.state.numberOfEmployees }}</strong> employees, how many receive health benefits?
</Trans>

// translation
"employees-with-benefits-question": "Out of <1>{{employees}}</1> employees, how many receive health benefits?",

for details: https://react.i18next.com/components/trans-component#how-to-get-the-correct-translation-string

or the full story: https://react.i18next.com/misc/the-trans-component-explained

[DevanB]

Ah! Thanks! I figured there was an option to use t. In fact, I'd prefer that. Thanks for the help!