fix #1909

Author: adrai

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 16.6.3
+
+- fix(types): merge `TransSelector` overloads into a single signature so `typeof Trans` remains extendable [1909](https://github.com/i18next/react-i18next/issues/1909)
+
 ### 16.6.2
 
 - feat(types): `useTranslation` now accepts selector functions as `keyPrefix` with full type-safe key narrowing when `enableSelector` is enabled [2367](https://github.com/i18next/i18next/issues/2367)

TransWithoutContext.d.ts

@@ -85,10 +85,11 @@ export interface TransSelectorProps<
 }
 
 export interface TransSelector {
-  // ── Selector function ──────────────────────────────────────────────────────
   <
     Target extends ConstrainTarget<TOpt>,
-    Key extends SelectorFn<GetSource<$NoInfer<Ns>, KPrefix>, ApplyTarget<Target, TOpt>, TOpt>,
+    Key extends
+      | SelectorFn<GetSource<$NoInfer<Ns>, KPrefix>, ApplyTarget<Target, TOpt>, TOpt>
+      | SelectorKey,
     const Ns extends Namespace = _DefaultNamespace,
     KPrefix = undefined,
     TContext extends string | undefined = undefined,
@@ -97,9 +98,6 @@ export interface TransSelector {
   >(
     props: TransSelectorProps<Key, Ns, KPrefix, TContext, TOpt> & E,
   ): React.ReactElement;
-
-  // ── Pre-computed SelectorKey ────────────────────────────────────────────────
-  (props: TransSelectorProps<SelectorKey> & Record<string, any>): React.ReactElement;
 }
 
 export const Trans: _EnableSelector extends true | 'optimize' ? TransSelector : TransLegacy;

test/typescript/selector-custom-types/Trans.test.tsx

@@ -143,5 +143,27 @@ describe('<Trans />', () => {
       const sk = keyFromSelector(($) => $.foo);
       <Trans i18nKey={sk} />;
     });
+
+    it('should accept an array of SelectorKey as i18nKey', () => {
+      const sk = keyFromSelector(($) => $.foo);
+      <Trans i18nKey={[sk]} />;
+    });
+  });
+
+  describe('typeof Trans wrapper', () => {
+    it('should allow extending Trans with typeof', () => {
+      const MyTrans: typeof Trans = (props) => {
+        return <Trans {...props} />;
+      };
+      <MyTrans i18nKey={($) => $.foo} />;
+    });
+
+    it('should allow extending Trans with typeof and SelectorKey', () => {
+      const sk = keyFromSelector(($) => $.foo);
+      const MyTrans: typeof Trans = (props) => {
+        return <Trans {...props} />;
+      };
+      <MyTrans i18nKey={sk} />;
+    });
   });
 });