Merge pull request #28445 from netanelgilad/master

add HOC props inference to v4 of react-i18next

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

@@ -1,6 +1,7 @@
 // Type definitions for react-i18next 4.6
 // Project: https://github.com/i18next/react-i18next
 // Definitions by: Giedrius Grabauskas <https://github.com/GiedriusGrabauskas>
+//                 Netanel Gilad <https://github.com/netanelgilad>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -31,7 +32,7 @@ export {
  * interface MyComponentProps extends ReactI18next.InjectedTranslateProps {}
  */
 export interface InjectedTranslateProps {
-    t?: TranslationFunction;
+    t: TranslationFunction;
 }
 
 export as namespace reactI18Next;

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

@@ -17,17 +17,16 @@ const AnotherComponent = translate('view', { wait: true, translateFuncName: '_'
 
 class InnerYetAnotherComponent extends React.Component<InjectedTranslateProps> {
   render() {
-    const t = this.props.t!;
+    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 t = this.props.t;
     const interpolateComponent = <strong>"a interpolated component"</strong>;
 
     return (
@@ -55,12 +54,14 @@ class TranslatableView extends React.Component<InjectedTranslateProps> {
   }
 }
 
+const WrappedTranslatableView = translate(['view', 'nav'], { wait: true })(TranslatableView);
+
 class App extends React.Component {
   render() {
     return (
       <div className='main'>
         <main>
-          <TranslatableView />
+          <WrappedTranslatableView />
         </main>
       </div>
     );
@@ -81,12 +82,14 @@ loadNamespaces({ components: [App], i18n }).then(() => { }).catch(error => { });
 
 type Key = "view" | "nav";
 
-@translate<Key>(['view', 'nav'])
 class GenericsTest extends React.Component<InjectedTranslateProps> {
   render() { return null; }
 }
 
-@translate<Key>('view')
+translate<Key>(['view', 'nav'])(GenericsTest);
+
 class GenericsTest2 extends React.Component<InjectedTranslateProps> {
   render() { return null; }
 }
+
+translate<Key>('view')(GenericsTest2);

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { i18n } from "i18next";
+import { InjectedTranslateProps } from "react-i18next";
 
 export interface TranslateOptions {
     withRef?: boolean;
@@ -11,5 +12,14 @@ export interface TranslateOptions {
     i18n?: i18n;
 }
 
+// Diff / Omit taken from https://github.com/Microsoft/TypeScript/issues/12215#issuecomment-311923766
+export type Omit<T, K extends keyof T> = Pick<T, ({ [P in keyof T]: P } & { [P in K]: never } & { [x: string]: never, [x: number]: never })[keyof T]>;
+
+// Injects props and removes them from the prop requirements.
+// Adds the new properties t (or whatever the translation function is called) and i18n if needed.
+export type InferableComponentEnhancerWithProps<TTranslateFunctionName extends string> =
+    <P extends { [key: string]: any }>(component: React.ComponentClass<P> | React.StatelessComponent<P>) =>
+        React.ComponentClass<Omit<P, keyof InjectedTranslateProps | TTranslateFunctionName>>;
+
 // 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;
+export default function translate<TKey extends string = string>(namespaces?: TKey[] | TKey, options?: TranslateOptions): InferableComponentEnhancerWithProps<"t">;