Update typescript tests for hooks and fix an error in the example

example/react/src/App.js

@@ -1,15 +1,12 @@
 import React, { Component, Suspense } from 'react';
-import { useTranslation, withTranslation, Trans } from 'react-i18next/hooks';
+import { useTranslation, withTranslation, Trans } from 'react-i18next';
 import logo from './logo.svg';
 import './App.css';
 
 // use hoc for class based components
 class LegacyWelcomeClass extends Component {
   render() {
-    const { t, ready } = this.props;
-
-    if (!ready) return null;
-
+    const { t, i18n } = this.props;
     return <h2>{t('title')}</h2>;
   }
 }

src/index.d.ts

@@ -1,33 +1,12 @@
 import i18next from 'i18next';
 import * as React from 'react';
 
-type Namespace = string | string[];
+type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 
-export interface ReactI18NextOptions extends i18next.ReactOptions {
-  usePureComponent?: boolean;
-  omitBoundRerender?: boolean;
-}
+export type Namespace = string | string[];
 
-export interface TransProps extends Partial<i18next.WithT> {
-  i18nKey?: string;
-  count?: number;
-  parent?: React.ReactNode;
-  i18n?: i18next.i18n;
-  defaults?: string;
-  values?: {};
-  components?: React.ReactNode[];
-}
-
-interface HooksTransProps extends TransProps {
-  children: React.ReactElement<any>[];
-  tOptions?: {};
-  ns?: Namespace;
-}
-interface UseTranslationOptions {
-  i18n?: i18next.i18n;
-}
-export function setDefaults(options: ReactI18NextOptions): void;
-export function getDefaults(): ReactI18NextOptions;
+export function setDefaults(options: i18next.ReactOptions): void;
+export function getDefaults(): i18next.ReactOptions;
 export function addUsedNamespaces(namespaces: Namespace[]): void;
 export function getUsedNamespaces(): string[];
 export function setI18n(instance: i18next.i18n): void;
@@ -43,27 +22,32 @@ export function getInitialProps(): {
   };
   initialLanguage: string;
 };
-export function Trans({
-  i18nKey,
-  count,
-  parent,
-  i18n: i18nFromProps,
-  t: tFromProps,
-  defaults,
-  values,
-  components,
-  children,
-  tOptions,
-  ns,
-  ...additionalProps
-}: HooksTransProps): any;
+
+export interface TransProps extends Partial<i18next.WithT> {
+  children: React.ReactNode;
+  components?: React.ReactNode[];
+  count?: number;
+  defaults?: string;
+  i18n?: i18next.i18n;
+  i18nKey?: string;
+  ns?: Namespace;
+  parent?: React.ReactNode;
+  tOptions?: {};
+  values?: {};
+}
+export function Trans(props: TransProps): any;
 
 export function useSSR(initialI18nStore: any, initialLanguage: any): void;
+
+export interface UseTranslationOptions {
+  i18n?: i18next.i18n;
+}
 export function useTranslation(
   ns?: Namespace,
   options?: UseTranslationOptions,
-): [i18next.TFunction, i18next.i18n | {}];
+): [i18next.TFunction, i18next.i18n];
 
+// Need to see usage to improve this
 export function withSSR(): (
   WrappedComponent: React.ComponentClass<{}, any>,
 ) => {
@@ -78,6 +62,12 @@ export function withSSR(): (
   }): React.ComponentElement<{}, React.Component<{}, any, any>>;
   getInitialProps: (ctx: unknown) => Promise<any>;
 };
+
+export interface WithTranslation extends i18next.WithT {
+  i18n: i18next.i18n;
+}
 export function withTranslation(
   ns?: Namespace,
-): (WrappedComponent: React.ComponentClass<any>) => (props: any) => any;
+): <P extends WithTranslation>(
+  component: React.ComponentType<P>,
+) => React.ComponentType<Omit<P, keyof WithTranslation>>;

test/typescript/examples.test.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { useTranslation, withTranslation, Trans, WithTranslation } from 'react-i18next';
+
+// use hoc for class based components
+class LegacyWelcomeClass extends React.Component<WithTranslation> {
+  render() {
+    const { t, i18n } = this.props;
+    return <h2>{t('title')}</h2>;
+  }
+}
+const Welcome = withTranslation()(LegacyWelcomeClass);
+
+// Component using the Trans component
+function MyComponent() {
+  return (
+    <Trans i18nKey="description.part1">
+      To get started, edit <code>src/App.js</code> and save to reload.
+    </Trans>
+  );
+}
+
+// page uses the hook
+function Page() {
+  const [t, i18n] = useTranslation();
+
+  const changeLanguage = (lng: string) => {
+    i18n.changeLanguage(lng);
+  };
+
+  return (
+    <div className="App">
+      <React.Suspense fallback={<Loader />}>
+        <div className="App-header">
+          <Welcome />
+          <button onClick={() => changeLanguage('de')}>de</button>
+          <button onClick={() => changeLanguage('en')}>en</button>
+        </div>
+        <div className="App-intro">
+          <MyComponent />
+        </div>
+        <div>{t('description.part2')}</div>
+      </React.Suspense>
+    </div>
+  );
+}
+
+// loading component for suspence fallback
+const Loader = () => <div className="App">Loading...</div>;
+
+// here app catches the suspense from page in case translations are not yet loaded
+export default function App() {
+  return (
+    <React.Suspense fallback={<Loader />}>
+      <Page />
+    </React.Suspense>
+  );
+}