[@types/react-i18next] Updating type definitions to latest library version (#21881)

* Added updated typings for react-i18next

* Fixed linting issues

* Removed typings for deprecated version

* Fixed build and updated typescript version in header

* Readded old version

* Updated PR with suggestions

* Removed unused files

types/react-i18next/index.d.ts

@@ -1,11 +1,21 @@
-// Type definitions for react-i18next 7.0
+// Type definitions for react-i18next 7.3
 // Project: https://github.com/i18next/react-i18next
 // Definitions by: Giedrius Grabauskas <https://github.com/GiedriusGrabauskas>
+//                 Simon Baumann <https://github.com/chnoch>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.4
 
-import { i18n as I18n, TranslationFunction } from "i18next";
+import { TranslationFunction } from "i18next";
 
+import {
+    setDefaults,
+    getDefaults,
+    setI18n,
+    getI18n,
+    ReactI18NextOptions,
+    reactI18nextModule
+} from "./src/context";
+import I18n from "./src/I18n";
 import I18nextProvider from "./src/I18nextProvider";
 import Interpolate from "./src/interpolate";
 import loadNamespaces from "./src/loadNamespaces";
@@ -13,12 +23,18 @@ import Trans from "./src/trans";
 import translate from "./src/translate";
 
 export {
+    setDefaults,
+    getDefaults,
+    setI18n,
+    getI18n,
+    ReactI18NextOptions,
+    reactI18nextModule,
+    I18n,
     I18nextProvider,
     Interpolate,
     loadNamespaces,
     Trans,
     translate,
-    // Exports for TypeScript only
     TranslationFunction
 };
 

types/react-i18next/src/I18n.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { i18n, TranslationFunction } from "i18next";
+
+export interface Options {
+    i18n: i18n;
+    t: TranslationFunction;
+}
+
+export interface i18nProps {
+    wait?: boolean;
+    ns: string | string[];
+    nsMode?: string;
+    bindI18n?: string;
+    bindStore?: string;
+    i18n?: i18n;
+    initialI18nStore?: any;
+    initialLanguage?: string;
+    children: (t: TranslationFunction, options: Options) => JSX.Element;
+}
+
+export default class I18n extends React.Component<i18nProps> { }

types/react-i18next/src/I18nextProvider.d.ts

@@ -4,9 +4,9 @@ import { i18n } from "i18next";
 // tslint:disable-next-line:interface-name
 export interface I18nextProviderProps {
     i18n: i18n;
-    children: React.ReactElement<any>;
     initialI18nStore?: any;
     initialLanguage?: string;
+    children: JSX.Element;
 }
 
 export default class I18nextProvider extends React.Component<I18nextProviderProps> { }

types/react-i18next/src/context.d.ts

@@ -11,4 +11,16 @@ export interface ReactI18NextOptions {
 
 export function setDefaults(options: ReactI18NextOptions): void;
 
+export function getDefaults(): ReactI18NextOptions;
+
 export function setI18n(instance: i18n): void;
+
+export function getI18n(): i18n;
+
+export interface i18NextModule {
+    type: string;
+
+    init: (instance: i18n) => void;
+}
+
+export const reactI18nextModule: i18NextModule;

types/react-i18next/src/interpolate.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { InterpolationOptions } from "i18next";
+import { i18n, InterpolationOptions, TranslationFunction } from "i18next";
 
 export type InterpolateValue = string | JSX.Element;
 
@@ -12,6 +12,8 @@ export interface InterpolatePropsBase {
     i18nKey?: string;
     className?: string;
     style?: React.CSSProperties;
+    i18n?: i18n;
+    t?: TranslationFunction;
 }
 
 export interface OtherInterpolateProps {
@@ -20,4 +22,4 @@ export interface OtherInterpolateProps {
 
 export type InterpolateProps = InterpolatePropsBase & OtherInterpolateProps;
 
-export default class Interpolate extends React.Component<InterpolateProps> { }
+export default class Interpolate extends React.PureComponent<InterpolateProps> { }

types/react-i18next/src/trans.d.ts

@@ -1,8 +1,12 @@
 import * as React from "react";
+import { i18n, TranslationFunction } from "i18next";
 
 export interface TransProps {
     i18nKey?: string;
-    [name: string]: any;
+    count?: number;
+    parent?: string;
+    i18n?: i18n;
+    t?: TranslationFunction;
 }
 
 export default class Trans extends React.Component<TransProps> { }

types/react-i18next/test/react-i18next-tests.tsx

@@ -1,20 +1,32 @@
 import * as React from 'react';
 import * as i18n from 'i18next';
-import { translate, I18nextProvider, Interpolate, InjectedTranslateProps, TranslationFunction, loadNamespaces, Trans } from 'react-i18next';
+import {
+    setDefaults,
+    reactI18nextModule,
+    translate,
+    I18nextProvider,
+    Interpolate,
+    InjectedTranslateProps,
+    TranslationFunction,
+    loadNamespaces,
+    Trans,
+    I18n,
+    ReactI18NextOptions
+} from 'react-i18next';
 import { InjectedI18nProps } from 'react-i18next/src/props';
 
 interface InnerAnotherComponentProps {
-  _: TranslationFunction;
+    _: TranslationFunction;
 }
 
 class InnerAnotherComponent extends React.Component<InnerAnotherComponentProps> {
-  render() {
-    const _ = this.props._;
-    return <p>{_('content.text', { /* options t options */ })}</p>;
-  }
+    render() {
+        const _ = this.props._;
+        return <p>{_('content.text', {/* options t options */})}</p>;
+    }
 }
 
-const AnotherComponent = translate<Key, "_">('view', { wait: true, translateFuncName: '_' })(InnerAnotherComponent);
+const AnotherComponent = translate<Key, "_">('view', {wait: true, translateFuncName: '_'})(InnerAnotherComponent);
 const instanceWithoutRef = new AnotherComponent({});
 instanceWithoutRef.componentWillReceiveProps!({
     i18n,
@@ -35,45 +47,46 @@ instanceWithRef.componentWillReceiveProps!({
 }, {});
 
 class InnerYetAnotherComponent extends React.Component<InjectedTranslateProps> {
-  render() {
-    const t = this.props.t;
-    return <p>{t('usingDefaultNS', { /* options t options */ })}</p>;
-  }
+    render() {
+        const t = this.props.t;
+        return <p>{t('usingDefaultNS', {/* options t options */})}</p>;
+    }
 }
 
 const YetAnotherComponent = translate()(InnerYetAnotherComponent);
 
 const YetAnotherComponentWithRef = translate(undefined, { withRef: true })(InnerYetAnotherComponent);
 new YetAnotherComponentWithRef({}).getWrappedInstance();
-
 class TranslatableView extends React.Component<InjectedTranslateProps> {
-  render() {
-    const t = this.props.t;
-    const interpolateComponent = <strong>"a interpolated component"</strong>;
-
-    return (
-      <div>
-        <h1>{t('common:appName')}</h1>
-        <AnotherComponent />
-        <YetAnotherComponent />
-        <Interpolate
-          parent='p'
-          i18nKey='common:interpolateSample'
-          value='"some value in props"'
-          component={interpolateComponent}
-        />
-        <Interpolate
-          parent='p'
-          i18nKey='common:interpolateSample'
-          useDangerouslySetInnerHTML={true}
-          dangerouslySetInnerHTMLPartElement='span'
-          value='"some value in props"'
-          component={interpolateComponent}
-        />
-        <a href='https://github.com/i18next/react-i18next' target='_blank'>{t('nav:link1')}</a>
-      </div>
-    );
-  }
+    render() {
+        const t = this.props.t;
+        const interpolateComponent = <strong>"a interpolated component"</strong>;
+        const options: i18n.InterpolationOptions = {};
+        return (
+            <div>
+                <h1>{t('common:appName')}</h1>
+                <AnotherComponent/>
+                <YetAnotherComponent/>
+                <Interpolate
+                    parent='p'
+                    i18nKey='common:interpolateSample'
+                    value='"some value in props"'
+                    component={interpolateComponent}
+                />
+                <Interpolate
+                    parent='p'
+                    options={options}
+                    i18nKey='common:interpolateSample'
+                    useDangerouslySetInnerHTML={true}
+                    dangerouslySetInnerHTMLPartElement='span'
+                    value='"some value in props"'
+                    component={interpolateComponent}
+                    i18n={i18n.init()}
+                />
+                <a href='https://github.com/i18next/react-i18next' target='_blank'>{t('nav:link1')}</a>
+            </div>
+        );
+    }
 }
 
 const TranslatedView = translate(["view", "nav"] as Key[], { wait: true })(TranslatableView);
@@ -90,29 +103,38 @@ class App extends React.Component {
   }
 }
 
-<I18nextProvider i18n={i18n}>
-  <App />
+<I18nextProvider i18n={i18n} initialLanguage={'en'} initialI18nStore={{}}>
+    <App/>
 </I18nextProvider>;
 
-loadNamespaces({ components: [App], i18n }).then(() => { }).catch(error => { });
+loadNamespaces({components: [App], i18n}).then(() => {
+}).catch(error => {
+});
 
-<Trans count={5} />;
-<Trans count={5} i18nKey="key" />;
+<Trans count={5}/>;
+<Trans count={5} i18nKey="key"/>;
+<Trans parent={'span'}/>;
+<Trans i18n={i18n.init()}/>;
+<Trans t={i18n.getFixedT('en')}/>;
 <Trans count={5}>
-  <App />
+    <App/>
 </Trans>;
 
 type Key = "view" | "nav";
 
 class GenericsTest extends React.Component<InjectedTranslateProps> {
-  render() { return null; }
+    render() {
+        return null;
+    }
 }
 
 const TranslatedGenericsTest = translate(["view", "nav"] as Key[])(GenericsTest);
 <TranslatedGenericsTest />;
 
 class GenericsTest2 extends React.Component<InjectedTranslateProps> {
-  render() { return null; }
+    render() {
+        return null;
+    }
 }
 
 const TranslatedGenericsTest2 = translate("view" as Key)(GenericsTest2);
@@ -135,3 +157,25 @@ const TranslatedStatlessComponent = translate()(StatlessComponent);
 interface CustomTranslateFunctionProps {
   _: TranslationFunction;
 }
+
+<I18n ns={['defaultNamespace', 'anotherNamespace']} wait={true} nsMode={'string'} bindI18n={'languageChanged loaded'}
+      bindStore={'added removed'}>
+    {
+        (t, {i18n}) => (
+            <div>
+                <h1>{t('keyFromDefault')}</h1>
+                <p>{t('anotherNamespace:key.from.another.namespace', {/* options t options */})}</p>
+            </div>
+        )
+    }
+</I18n>;
+
+const defaults: ReactI18NextOptions = {
+    wait: true,
+    withRef: true,
+    bindI18n: 'string',
+    bindStore: 'string'
+};
+setDefaults(defaults);
+
+reactI18nextModule.init(i18n.init());

types/react-i18next/tsconfig.json

@@ -23,10 +23,12 @@
     "files": [
         "index.d.ts",
         "test/react-i18next-tests.tsx",
+        "src/context.d.ts",
+        "src/I18n.d.ts",
         "src/I18nextProvider.d.ts",
         "src/interpolate.d.ts",
         "src/loadNamespaces.d.ts",
         "src/trans.d.ts",
         "src/translate.d.ts"
     ]
-}
+}

types/react-i18next/v4/index.d.ts

@@ -6,11 +6,11 @@
 
 import { TranslationFunction } from "i18next";
 
-import I18nextProvider from "./src/I18nextProvider";
-import Interpolate from "./src/interpolate";
-import loadNamespaces from "./src/loadNamespaces";
-import Trans from "./src/trans";
-import translate from "./src/translate";
+import I18nextProvider from "./I18nextProvider";
+import Interpolate from "./interpolate";
+import loadNamespaces from "./loadNamespaces";
+import Trans from "./trans";
+import translate from "./translate";
 
 export {
     I18nextProvider,

types/react-i18next/v4/tsconfig.json

@@ -8,27 +8,29 @@
         "noImplicitAny": true,
         "noImplicitThis": true,
         "strictNullChecks": true,
+        "strictFunctionTypes": true,
         "baseUrl": "../../",
         "typeRoots": [
             "../../"
         ],
         "paths": {
-            "react-i18next": [ "react-i18next/v4" ]
+            "react-i18next": [
+                "react-i18next/v4"
+            ]
         },
         "types": [],
         "noEmit": true,
         "forceConsistentCasingInFileNames": true,
-        "strictFunctionTypes": true,
         "jsx": "react",
         "experimentalDecorators": true
     },
     "files": [
         "index.d.ts",
-        "test/react-i18next-tests.tsx",
-        "src/I18nextProvider.d.ts",
-        "src/interpolate.d.ts",
-        "src/loadNamespaces.d.ts",
-        "src/trans.d.ts",
-        "src/translate.d.ts"
+        "react-i18next-tests.tsx",
+        "I18nextProvider.d.ts",
+        "interpolate.d.ts",
+        "loadNamespaces.d.ts",
+        "trans.d.ts",
+        "translate.d.ts"
     ]
 }