Merge pull request #1 from tkow/feature/add-traslate-generic

Rewrite interface with WithT interface introduced

Author: tkow

package.json

@@ -57,7 +57,7 @@
     "eslint-plugin-jsx-a11y": "6.1.1",
     "eslint-plugin-prettier": "2.7.0",
     "eslint-plugin-react": "7.11.1",
-    "i18next": "13.1.0",
+    "i18next": "^13.1.4",
     "jest": "23.6.0",
     "jest-cli": "23.6.0",
     "mkdirp": "0.5.1",
@@ -78,7 +78,7 @@
     "yargs": "12.0.2"
   },
   "peerDependencies": {
-    "i18next": ">= 6.0.1",
+    "i18next": ">= 13.1.3",
     "react": ">= 16.3.0"
   },
   "scripts": {

src/index.d.ts

@@ -14,11 +14,6 @@ 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;
@@ -29,7 +24,7 @@ export function setI18n(instance: i18next.i18n): void;
 
 export function getI18n(): i18next.i18n;
 
-export interface I18nContextValues extends ReactI18nextTranslateFunction{
+export interface I18nContextValues extends i18next.WithT {
   i18n: i18next.i18n;
   defaultNS?: string;
   reportNS?: string;
@@ -80,7 +75,7 @@ export interface NamespacesConsumerProps extends ReactI18NextOptions {
   initialI18nStore?: {};
   initialLanguage?: string;
   children: (
-    t: ReactI18nextTranslateFunction['t'],
+    t: i18next.WithT['t'],
     options: {
       i18n: i18next.i18n;
       lng: string;
@@ -100,7 +95,7 @@ export interface I18nextProviderProps {
 
 export const I18nextProvider: React.ComponentClass<I18nextProviderProps>;
 
-export interface TransProps extends Partial<ReactI18nextTranslateFunction>{
+export interface TransProps extends Partial<i18next.WithT>{
   i18nKey?: string;
   count?: number;
   parent?: React.ReactNode;

test/typescript/GenericTlanslateFunction.test.tsx

@@ -8,10 +8,6 @@ import {
 
 type TKeys = "title" | "text";
 
-declare interface IWithNamespacesOverrideTest extends WithNamespaces {
-  t<T extends string| string[]>(a: T): any;
-}
-
 function NamespacesConsumerTest() {
   return (
     <NamespacesConsumer>
@@ -22,6 +18,7 @@ function NamespacesConsumerTest() {
           <span>{t("any", {anyObject: {}})}</span>
           <span>{t<TKeys>("text")}</span>
           <span>{t<TKeys, {key: string}>("text", {key: "foo"})}</span>
+          <span>{t<TKeys, {key: "bar"}, string>("text", {key: "bar"})}</span>
         </div>
       }
     </NamespacesConsumer>
@@ -45,7 +42,16 @@ const MyComponentWrapped = withNamespaces()(TransComponentTest);
 
 type ArticleKeys = "article.part1" | "article.part2";
 type AnotherArticleKeys = "anotherArticle.part1" | "anotherArticle.part2";
-class App extends React.Component<WithNamespaces> {
+
+/**
+ * Overload makes completion of arguments by without specifying type parameters
+ */
+interface IOverloadedWithNamespaces extends WithNamespaces {
+  t(key: ArticleKeys, b?: object): any;
+  t<T extends AnotherArticleKeys>(key: T, b: {name: string}): any;
+}
+
+class App extends React.Component<IOverloadedWithNamespaces> {
   public render() {
     const { t, i18n } = this.props;
 
@@ -64,12 +70,12 @@ class App extends React.Component<WithNamespaces> {
           <MyComponentWrapped />
         </div>
         <article>
-          <div>{t<ArticleKeys>("article.part1")}</div>
-          <div>{t<ArticleKeys>("article.part2")}</div>
+          <div>{t("article.part1", {name: "foo"})}</div>
+          <div>{t("article.part2")}</div>
         </article>
         <article>
-          <div>{t<AnotherArticleKeys>("anotherArticle.part1")}</div>
-          <div>{t<AnotherArticleKeys>("anotherArticle.part2")}</div>
+          <div>{t<AnotherArticleKeys>("anotherArticle.part1", {name: "foo"})}</div>
+          <div>{t<AnotherArticleKeys>("anotherArticle.part2", {name: "bar"})}</div>
         </article>
       </div>
     );