fix(types): values prop on <Trans /> now only requires interpolation variables for the specific i18nKey, not all variables in the namespace #1913

Author: adrai

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 17.0.2
+
+- fix(types): `values` prop on `<Trans />` now only requires interpolation variables for the specific `i18nKey`, not all variables in the namespace [1913](https://github.com/i18next/react-i18next/issues/1913)
+
 ## 17.0.1
 
 - chore: bump minimum i18next peer dependency to `>= 26.0.1` _(forgot to do it in last version)_

TransWithoutContext.d.ts

@@ -32,6 +32,7 @@ export type TransProps<
   KPrefix = undefined,
   TContext extends string | undefined = undefined,
   TOpt extends TOptions & { context?: TContext } = { context: TContext },
+  Ret = TFunctionReturn<Ns, _AppendKeyPrefix<Key, KPrefix>, TOpt>,
   E = React.HTMLProps<HTMLDivElement>,
 > = E & {
   children?: TransChild | readonly TransChild[];
@@ -44,21 +45,26 @@ export type TransProps<
   ns?: Ns;
   parent?: string | React.ComponentType<any> | null; // used in React.createElement if not null
   tOptions?: TOpt;
-  values?: InterpolationMap<TFunctionReturn<Ns, _AppendKeyPrefix<Key, KPrefix>, TOpt>>;
+  values?: InterpolationMap<Ret>;
   shouldUnescape?: boolean;
   t?: TFunction<Ns, KPrefix>;
 };
 
 export interface TransLegacy {
   <
-    Key extends ParseKeys<Ns, TOpt, KPrefix>,
+    const Key extends ParseKeys<Ns, TOpt, KPrefix>,
     Ns extends Namespace = _DefaultNamespace,
     KPrefix = undefined,
     TContext extends string | undefined = undefined,
     TOpt extends TOptions & { context?: TContext } = { context: TContext },
+    Ret extends TFunctionReturn<Ns, _AppendKeyPrefix<Key, KPrefix>, TOpt> = TFunctionReturn<
+      Ns,
+      _AppendKeyPrefix<Key, KPrefix>,
+      TOpt
+    >,
     E = React.HTMLProps<HTMLDivElement>,
   >(
-    props: TransProps<Key, Ns, KPrefix, TContext, TOpt, E>,
+    props: TransProps<Key, Ns, KPrefix, TContext, TOpt, Ret, E>,
   ): React.ReactElement;
 }
 

package-lock.json

@@ -127,7 +127,7 @@
     "eslint-plugin-testing-library": "^6.5.0",
     "happy-dom": "^20.8.9",
     "husky": "^9.1.7",
-    "i18next": "^26.0.1",
+    "i18next": "^26.0.3",
     "lint-staged": "^16.4.0",
     "mkdirp": "^3.0.1",
     "prettier": "^3.8.1",

package.json

@@ -0,0 +1,32 @@
+import { describe, it, assertType } from 'vitest';
+import * as React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+/**
+ * Regression test for https://github.com/i18next/react-i18next/issues/1913
+ *
+ * The `values` prop of `Trans` was requiring ALL interpolation variables from
+ * the entire namespace instead of only the variables for the specific `i18nKey`.
+ */
+describe('issue #1913 - values prop should only require variables for the given key', () => {
+  it('should work in JSX without t', () => {
+    assertType<React.ReactElement>(<Trans i18nKey="title" values={{ appName: 'My App' }} />);
+  });
+
+  it('should work in JSX with t from useTranslation', () => {
+    const { t } = useTranslation();
+    assertType<React.ReactElement>(<Trans t={t} i18nKey="title" values={{ appName: 'My App' }} />);
+  });
+
+  it('should work in JSX with t from array namespace', () => {
+    const { t } = useTranslation(['custom']);
+    assertType<React.ReactElement>(<Trans t={t} i18nKey="title" values={{ appName: 'My App' }} />);
+  });
+
+  it('should work in JSX with explicit ns', () => {
+    const { t } = useTranslation(['custom']);
+    assertType<React.ReactElement>(
+      <Trans t={t} ns="custom" i18nKey="title" values={{ appName: 'My App' }} />,
+    );
+  });
+});