React-i18next: Typescript: withTranslation returns a component that does not declare UseTranslationOptions properties

[fromi]

Describe the bug
Try to do that with Typescript:

const ExtendedComponent = withTranslation('ns1')(MyComponent)
<ExtendedComponent i18n={i18n} />

It produces a Typescript error: property i18n is missing. Same for property 'suspense'

Workaround
Cast the return type:

const ExtendedComponent = withTranslation('ns1')(MyComponent) as ComponentType<UseTranslationOptions>

Occurs in react-i18next version
Version 11.2.2

[louisnow]

@fromi Does MyComponent props extend WithTranslation?
In my case after I extend the interface, the component will always expect the optional props i18n, t, etc

import { WithTranslation, withTranslation } from 'react-i18next';

interface IComponentProps extends WithTranslation {}
interface IComponentState {}

class MyComponent extends React.Component<IComponentProps, IComponentState>
{}

export default withTranslation()(MyComponent)

Now wherever I use this component I get an error saying I have to pass in the i18n, t and tReady properties. I suspect the error is to do with the return type of the withTranslation function which has it's type defined as

export interface WithTranslation extends WithT {
  i18n: i18n;
  tReady: boolean;
}
export function withTranslation(
  ns?: Namespace,
  options?: {
    withRef?: boolean;
  },
): <P extends WithTranslation>(
  component: React.ComponentType<P>,
) => React.ComponentType<Omit<P, keyof WithTranslation>>;

[fromi]

I tried again based on your example, and for me i18n does not exist on the component.

Try this simple tsx file:

import React, {ComponentType} from 'react'
import {WithTranslation, withTranslation} from 'react-i18next'

interface IComponentProps extends WithTranslation {}

const MyComponent: ComponentType<IComponentProps> = () => {
  return null
}

const MyComponentWithTranslation = withTranslation()(MyComponent)

const test = <MyComponentWithTranslation i18n={...}/> // Property i18n does not exist here for Typescript

[rosskevin]

Here is our usage test:
https://github.com/i18next/react-i18next/blob/master/test/typescript/withTranslation.test.tsx

It proves the basics work, but does not cover all cases. If you have identified an edge case please PR another usage test to that file (and comment any relevant reference to docs) and I can take a look.

[fromi]

That's great!
All there is to do in your file is adding i18n={null} on line 18:
return <TranslatedFoo bar="baz" i18n={null} />;
This will highlight the issue.

The relevant reference in the docs is here: https://react.i18next.com/latest/withtranslation-hoc#overriding-the-i-18-next-instance

[rosskevin]

Thanks for the doc link @fromi, I added/merged the relevant changes, it will be in the next patch release.