Updated react-i18next types to 4.6.1 (#17715)

* Create tslint.json

* Moved v1 types to specified version folder.

* Created types for react-i18next.

* Exported as global UMD module.

* Added more tests.

* Fixed dtslint errors.

* Removed @KostyaEsmukov from the authors list.

* Added addition data for Trans component.

* Added typescript 2.3 support.

* Added generic TKey for translate method.

* Removed path map to i18next/v2.

* Fixed dtslint error.

* Fixed ts error.

types/react-i18next/index.d.ts

@@ -1,57 +1,37 @@
-// Type definitions for react-i18next 1.7.0
+// Type definitions for react-i18next 4.6
 // Project: https://github.com/i18next/react-i18next
-// Definitions by: Kostya Esmukov <https://github.com/KostyaEsmukov>
+// Definitions by: Giedrius Grabauskas <https://github.com/GiedriusGrabauskas>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.3
 
-import * as I18next from "i18next";
-import * as React from "react";
+import { TranslationFunction } from "i18next";
 
-export type TranslationFunction = I18next.TranslationFunction;
+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";
 
-// Extend your component's Prop interface with this one to get access to `this.props.t`
-//
-// Please note that if you use the `translateFuncName` option, you should create
-// your own interface just like this one, but with your name of the translation function.
-//
-// interface MyComponentProps extends ReactI18next.InjectedTranslateProps {}
+export {
+    I18nextProvider,
+    Interpolate,
+    loadNamespaces,
+    Trans,
+    translate,
+    // Exports for TypeScript only
+    TranslationFunction
+};
+
+/**
+ * Extend your component's Prop interface with this one to get access to `this.props.t`
+ *
+ * Please note that if you use the `translateFuncName` option, you should create
+ * your own interface just like this one, but with your name of the translation function.
+ *
+ * interface MyComponentProps extends ReactI18next.InjectedTranslateProps {}
+ */
 export interface InjectedTranslateProps {
     t?: TranslationFunction;
 }
 
-interface I18nextProviderProps {
-    i18n: I18next.I18n;
-    children?: React.ReactElement<any>;
-}
-
-export class I18nextProvider extends React.Component<I18nextProviderProps> { }
-
-
-type InterpolateValue = string | JSX.Element;
-
-interface InterpolateProps {
-    i18nKey: string;
-
-    parent?: string;
-    regexp?: RegExp;
-    options?: I18next.TranslationOptions;
-
-    useDangerouslySetInnerHTML?: boolean;
-    dangerouslySetInnerHTMLPartElement?: string;
-
-    [regexKey: string]: InterpolateValue | RegExp | I18next.TranslationOptions | boolean | undefined;
-}
-
-export class Interpolate extends React.Component<InterpolateProps> { }
-
-interface TranslateOptions {
-    withRef?: boolean;
-    wait?: boolean;
-    translateFuncName?: string;
-}
-
-export function translate(namespaces?: string[] | string, options?: TranslateOptions): <C extends Function>(WrappedComponent: C) => C;
-
-export function loadNamespaces({ components, i18n }: { components: (React.ComponentClass<any> | React.StatelessComponent<any>)[], i18n: I18next.I18n }): Promise<void>;
-
-export as namespace ReactI18Next;
+export as namespace reactI18Next;

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { i18n } from "i18next";
+
+// tslint:disable-next-line:interface-name
+export interface I18nextProviderProps {
+    i18n: i18n;
+    children: React.ReactElement<any>;
+    initialI18nStore?: any;
+    initialLanguage?: string;
+}
+
+export default class I18nextProvider extends React.Component<I18nextProviderProps> { }

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { InterpolationOptions } from "i18next";
+
+export type InterpolateValue = string | JSX.Element;
+
+export interface InterpolatePropsBase {
+    parent?: string;
+    regexp?: RegExp;
+    useDangerouslySetInnerHTML?: boolean;
+    dangerouslySetInnerHTMLPartElement?: string;
+    options?: InterpolationOptions;
+    i18nKey?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+export interface OtherInterpolateProps {
+    [regexKey: string]: InterpolateValue | RegExp | InterpolationOptions | boolean | undefined;
+}
+
+export type InterpolateProps = InterpolatePropsBase & OtherInterpolateProps;
+
+export default class Interpolate extends React.Component<InterpolateProps> { }

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { i18n } from "i18next";
+
+export interface LoadNamespacesArguments {
+    components: Array<React.ComponentClass<any> | React.StatelessComponent<any>>;
+    i18n: i18n;
+}
+
+export default function loadNamespaces(args: LoadNamespacesArguments): Promise<void>;

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+
+export interface TransProps {
+    i18nKey?: string;
+    [name: string]: any;
+}
+
+export default class Trans extends React.Component<TransProps> { }

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { i18n } from "i18next";
+
+export interface TranslateOptions {
+    withRef?: boolean;
+    bindI18n?: string;
+    bindStore?: string;
+    translateFuncName?: string;
+    wait?: boolean;
+    nsMode?: string;
+    i18n?: i18n;
+}
+
+// tslint:disable-next-line:ban-types
+export default function translate<TKey extends string = string>(namespaces?: TKey[] | TKey, options?: TranslateOptions): <C extends Function>(WrappedComponent: C) => C;

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

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import * as i18n from 'i18next';
+import { translate, I18nextProvider, Interpolate, InjectedTranslateProps, TranslationFunction, loadNamespaces, Trans } from 'react-i18next';
+
+interface InnerAnotherComponentProps {
+  _?: TranslationFunction;
+}
+
+class InnerAnotherComponent extends React.Component<InnerAnotherComponentProps> {
+  render() {
+    const _ = this.props._!;
+    return <p>{_('content.text', { /* options t options */ })}</p>;
+  }
+}
+
+const AnotherComponent = translate('view', { wait: true, translateFuncName: '_' })(InnerAnotherComponent);
+
+class InnerYetAnotherComponent extends React.Component<InjectedTranslateProps> {
+  render() {
+    const t = this.props.t!;
+    return <p>{t('usingDefaultNS', { /* options t options */ })}</p>;
+  }
+}
+
+const YetAnotherComponent = translate()(InnerYetAnotherComponent);
+
+@translate(['view', 'nav'], { wait: true })
+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>
+    );
+  }
+}
+
+class App extends React.Component {
+  render() {
+    return (
+      <div className='main'>
+        <main>
+          <TranslatableView />
+        </main>
+      </div>
+    );
+  }
+}
+
+<I18nextProvider i18n={i18n}>
+  <App />
+</I18nextProvider>;
+
+loadNamespaces({ components: [App], i18n }).then(() => { }).catch(error => { });
+
+<Trans count={5} />;
+<Trans count={5} i18nKey="key" />;
+<Trans count={5}>
+  <App />
+</Trans>;
+
+type Key = "view" | "nav";
+
+@translate<Key>(['view', 'nav'])
+class GenericsTest extends React.Component<InjectedTranslateProps> {
+  render() { return null; }
+}
+
+@translate<Key>('view')
+class GenericsTest2 extends React.Component<InjectedTranslateProps> {
+  render() { return null; }
+}

types/react-i18next/tsconfig.json

@@ -13,11 +13,6 @@
             "../"
         ],
         "types": [],
-        "paths": {
-            "i18next": [
-                "i18next/v2"
-            ]
-        },
         "noEmit": true,
         "forceConsistentCasingInFileNames": true,
         "jsx": "react",
@@ -25,6 +20,11 @@
     },
     "files": [
         "index.d.ts",
-        "react-i18next-tests.tsx"
+        "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"
     ]
 }

types/react-i18next/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }

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

@@ -0,0 +1,57 @@
+// Type definitions for react-i18next 1.7.0
+// Project: https://github.com/i18next/react-i18next
+// Definitions by: Kostya Esmukov <https://github.com/KostyaEsmukov>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+import * as I18next from "i18next";
+import * as React from "react";
+
+export type TranslationFunction = I18next.TranslationFunction;
+
+// Extend your component's Prop interface with this one to get access to `this.props.t`
+//
+// Please note that if you use the `translateFuncName` option, you should create
+// your own interface just like this one, but with your name of the translation function.
+//
+// interface MyComponentProps extends ReactI18next.InjectedTranslateProps {}
+export interface InjectedTranslateProps {
+    t?: TranslationFunction;
+}
+
+interface I18nextProviderProps {
+    i18n: I18next.I18n;
+    children?: React.ReactElement<any>;
+}
+
+export class I18nextProvider extends React.Component<I18nextProviderProps> { }
+
+
+type InterpolateValue = string | JSX.Element;
+
+interface InterpolateProps {
+    i18nKey: string;
+
+    parent?: string;
+    regexp?: RegExp;
+    options?: I18next.TranslationOptions;
+
+    useDangerouslySetInnerHTML?: boolean;
+    dangerouslySetInnerHTMLPartElement?: string;
+
+    [regexKey: string]: InterpolateValue | RegExp | I18next.TranslationOptions | boolean | undefined;
+}
+
+export class Interpolate extends React.Component<InterpolateProps> { }
+
+interface TranslateOptions {
+    withRef?: boolean;
+    wait?: boolean;
+    translateFuncName?: string;
+}
+
+export function translate(namespaces?: string[] | string, options?: TranslateOptions): <C extends Function>(WrappedComponent: C) => C;
+
+export function loadNamespaces({ components, i18n }: { components: (React.ComponentClass<any> | React.StatelessComponent<any>)[], i18n: I18next.I18n }): Promise<void>;
+
+export as namespace ReactI18Next;

types/react-i18next/v1/tsconfig.json

@@ -0,0 +1,33 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../../",
+        "typeRoots": [
+            "../../"
+        ],
+        "paths": {
+            "react-i18next": [
+                "react-i18next/v1"
+            ],
+            "i18next": [
+                "i18next/v2"
+            ]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react",
+        "experimentalDecorators": true
+    },
+    "files": [
+        "index.d.ts",
+        "react-i18next-tests.tsx"
+    ]
+}