diff --git a/package.json b/package.json index 6409f0c42..ea07cb228 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,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", @@ -79,7 +79,7 @@ "yargs": "12.0.2" }, "peerDependencies": { - "i18next": ">= 6.0.1", + "i18next": ">= 13.1.3", "react": ">= 16.3.0" }, "scripts": { diff --git a/src/index.d.ts b/src/index.d.ts index 2cfa01576..7828b7df0 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -24,9 +24,8 @@ export function setI18n(instance: i18next.i18n): void export function getI18n(): i18next.i18n -export interface I18nContextValues { +export interface I18nContextValues extends i18next.WithT { i18n: i18next.i18n - t: i18next.TranslationFunction defaultNS?: string reportNS?: string lng?: string @@ -74,7 +73,7 @@ export interface NamespacesConsumerProps extends ReactI18NextOptions { initialI18nStore?: {} initialLanguage?: string children: ( - t: i18next.TranslationFunction, + t: i18next.WithT['t'], options: { i18n: i18next.i18n lng: string @@ -94,12 +93,11 @@ export interface I18nextProviderProps { export const I18nextProvider: React.ComponentClass -export interface TransProps { +export interface TransProps extends Partial{ i18nKey?: string count?: number parent?: React.ReactNode i18n?: i18next.i18n - t?: i18next.TranslationFunction defaults?: string values?: {} components?: React.ReactNode[] diff --git a/test/typescript/GenericTlanslateFunction.test.tsx b/test/typescript/GenericTlanslateFunction.test.tsx new file mode 100644 index 000000000..7a0b5d194 --- /dev/null +++ b/test/typescript/GenericTlanslateFunction.test.tsx @@ -0,0 +1,86 @@ +import * as React from "react"; +import { + NamespacesConsumer, + Trans, + withNamespaces, + WithNamespaces, +} from 'react-i18next'; + +type TKeys = "title" | "text"; + +function NamespacesConsumerTest() { + return ( + + {(t, { i18n }) => +
+

{t("title")}

+ {t("any")} + {t("any", {anyObject: {}})} + {t("text")} + {t("text", {key: "foo"})} + {t("text", {key: "bar"})} +
+ } +
+ ); +} + +function TransComponentTest({ t }: WithNamespaces) { + return ( +
+ + To get started, edit src/App.js and save to reload. + + + To get started, ("title")}>{{name}}and save to reload. + +
+ ); +} + +const MyComponentWrapped = withNamespaces()(TransComponentTest); + +type ArticleKeys = "article.part1" | "article.part2"; +type AnotherArticleKeys = "anotherArticle.part1" | "anotherArticle.part2"; + +/** + * Overload makes completion of arguments by without specifying type parameters + */ +interface OverloadedWithNamespaces extends WithNamespaces { + t(key: ArticleKeys, b?: object): any; + // NOTION: disable no-unnecessary-generics for generic test + // tslint:disable-next-line:no-unnecessary-generics + t(key: T, b: {name: string}): any; +} + +class App extends React.Component { + render() { + const { t, i18n } = this.props; + + const changeLanguage = (lng: string) => { + i18n.changeLanguage(lng); + }; + + return ( +
+
+ + + +
+
+ +
+
+
{t("article.part1", {name: "foo"})}
+
{t("article.part2")}
+
+
+
{t("anotherArticle.part1", {name: "foo"})}
+
{t("anotherArticle.part2", {name: "bar"})}
+
+
+ ); + } +} +export default withNamespaces("translation")(App);