Add typescript for Translation component - clarify options, simplify …

…redundant use of t (#709)

src/Translation.js

@@ -2,12 +2,11 @@ import React from 'react';
 import { useTranslation } from './useTranslation';
 
 export function Translation(props) {
-  const { ns, children } = props;
-  const [t, i18n] = useTranslation(ns, props);
+  const { ns, children, ...options } = props;
+  const [t, i18n] = useTranslation(ns, options);
 
   return children(t, {
     i18n,
-    t,
     lng: i18n.language,
   });
 }

src/index.d.ts

@@ -71,3 +71,17 @@ export function withTranslation(
 ): <P extends WithTranslation>(
   component: React.ComponentType<P>,
 ) => React.ComponentType<Omit<P, keyof WithTranslation>>;
+
+export interface TranslationProps {
+  children: (
+    t: i18next.TFunction,
+    options: {
+      i18n: i18next.i18n;
+      lng: string;
+    },
+  ) => React.ReactNode;
+  ns?: Namespace;
+  i18n?: i18next.i18n;
+}
+
+export function Translation(props: TranslationProps): any;

test/typescript/Translation.test.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Translation } from 'react-i18next';
+
+function basic() {
+  return <Translation>{(t, { i18n, lng }) => <div>{t('key1')}</div>}</Translation>;
+}
+
+function ns() {
+  return <Translation ns="foo">{(t, { i18n, lng }) => <div>{t('key1')}</div>}</Translation>;
+}
+
+function nsArray() {
+  return (
+    <Translation ns={['foo', 'bar']}>{(t, { i18n, lng }) => <div>{t('key1')}</div>}</Translation>
+  );
+}