add generic type to t function and the tests

src/index.d.ts

@@ -14,6 +14,11 @@ interface ReactI18nextModule {
   init: (instance: i18next.i18n) => void;
 }
 
+interface ReactI18nextTranslateFunction {
+  t<TKeys extends string=string,TVals extends object =object,TResult=any>
+  (key: TKeys | TKeys[], options?: i18next.TranslationOptions<TVals>):TResult;
+}
+
 export const reactI18nextModule: ReactI18nextModule;
 
 export function setDefaults(options: ReactI18NextOptions): void;
@@ -24,9 +29,8 @@ export function setI18n(instance: i18next.i18n): void;
 
 export function getI18n(): i18next.i18n;
 
-export interface I18nContextValues {
+export interface I18nContextValues extends ReactI18nextTranslateFunction{
   i18n: i18next.i18n;
-  t: i18next.TranslationFunction;
   defaultNS?: string;
   reportNS?: string;
   lng?: string;
@@ -76,7 +80,7 @@ export interface NamespacesConsumerProps extends ReactI18NextOptions {
   initialI18nStore?: {};
   initialLanguage?: string;
   children: (
-    t: i18next.TranslationFunction,
+    t: ReactI18nextTranslateFunction['t'],
     options: {
       i18n: i18next.i18n;
       lng: string;
@@ -96,12 +100,11 @@ export interface I18nextProviderProps {
 
 export const I18nextProvider: React.ComponentClass<I18nextProviderProps>;
 
-export interface TransProps {
+export interface TransProps extends Partial<ReactI18nextTranslateFunction>{
   i18nKey?: string;
   count?: number;
   parent?: React.ReactNode;
   i18n?: i18next.i18n;
-  t?: i18next.TranslationFunction;
   defaults?: string;
   values?: {};
   components?: React.ReactNode[];

test/typescript/GenericTlanslateFunction.test.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import {
+  NamespacesConsumer,
+  Trans,
+  withNamespaces,
+  WithNamespaces,
+} from "../../src/index";
+
+type TKeys = "title" | "text";
+
+declare interface IWithNamespacesOverrideTest extends WithNamespaces {
+  t<T extends string| string[]>(a: T): any;
+}
+
+function NamespacesConsumerTest() {
+  return (
+    <NamespacesConsumer>
+      {(t, { i18n }) =>
+        <div>
+          <h2>{t<TKeys>("title")}</h2>
+          <span>{t("any")}</span>
+          <span>{t("any", {anyObject: {}})}</span>
+          <span>{t<TKeys>("text")}</span>
+          <span>{t<TKeys, {key: string}>("text", {key: "foo"})}</span>
+        </div>
+      }
+    </NamespacesConsumer>
+  );
+}
+
+function TransComponentTest({ t }: WithNamespaces) {
+  return (
+    <div>
+      <Trans i18nKey="description.part1">
+        To get started, edit <code>src/App.js</code> and save to reload.
+      </Trans>
+      <Trans i18nKey="description.part1">
+        To get started, <strong title={t<TKeys>("title")}>{{name}}</strong>and save to reload.
+      </Trans>
+    </div>
+  );
+}
+
+const MyComponentWrapped = withNamespaces()(TransComponentTest);
+
+type ArticleKeys = "article.part1" | "article.part2";
+type AnotherArticleKeys = "anotherArticle.part1" | "anotherArticle.part2";
+class App extends React.Component<WithNamespaces> {
+  public render() {
+    const { t, i18n } = this.props;
+
+    const changeLanguage = (lng: string) => {
+      i18n.changeLanguage(lng);
+    };
+
+    return (
+      <div className="App">
+        <div className="App-header">
+          <NamespacesConsumerTest />
+          <button onClick={() => changeLanguage("de")}>de</button>
+          <button onClick={() => changeLanguage("en")}>en</button>
+        </div>
+        <div className="App-intro">
+          <MyComponentWrapped />
+        </div>
+        <article>
+          <div>{t<ArticleKeys>("article.part1")}</div>
+          <div>{t<ArticleKeys>("article.part2")}</div>
+        </article>
+        <article>
+          <div>{t<AnotherArticleKeys>("anotherArticle.part1")}</div>
+          <div>{t<AnotherArticleKeys>("anotherArticle.part2")}</div>
+        </article>
+      </div>
+    );
+  }
+}
+export default withNamespaces("translation")(App);