types: fix: WithTranslation type from next-i18next is not generic (TS error) #2329

Author: adrai

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 15.4.3
+
+- types: fix: WithTranslation type from next-i18next is not generic (TS error) [#2329](https://github.com/i18next/next-i18next/issues/2329)
+
 ## 15.4.2
 
 - types: re-add @types/hoist-non-react-statics to dependencies [#2316](https://github.com/i18next/next-i18next/pull/2316)

src/types.test.ts

@@ -0,0 +1,29 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+import type { WithTranslation, UseTranslation } from './types'
+
+type X = WithTranslation<'common'>
+
+const _assert: X = {
+  i18n: {} as any,
+  // t signature is complex; cast to any for this compile-only check
+  t: ((..._args: any[]) => '') as any,
+  tReady: true,
+}
+
+type R = ReturnType<UseTranslation<'common'>>
+
+const _assertTwo: R = [
+  // t
+  ((..._args: any[]) => '') as any,
+  // i18n
+  {} as any,
+  // ready
+  true,
+] as any
+
+
+// Runtime noop test so Jest treats this file as a test suite.
+test('types compile-only', () => {
+  expect(true).toBe(true)
+})

src/types.ts

@@ -6,12 +6,17 @@ import {
   withTranslation,
   WithTranslation as ReactI18nextWithTranslation,
   Translation,
+  FallbackNs,
+  UseTranslationOptions,
+  UseTranslationResponse,
 } from 'react-i18next'
 import {
   InitOptions,
   i18n as I18NextClient,
   TFunction as I18NextTFunction,
   TypeOptions,
+  FlatNamespace,
+  KeyPrefix,
 } from 'i18next'
 import { appWithTranslation, i18n } from './'
 
@@ -58,12 +63,23 @@ export type InternalConfig = Omit<UserConfig, 'i18n'> &
     supportedLngs: string[]
   }
 
-export type UseTranslation = typeof useTranslation
+type $Tuple<T> = readonly [T?, ...T[]];
+
+export type UseTranslation<
+  Ns extends FlatNamespace | $Tuple<FlatNamespace> | undefined = undefined,
+  KPrefix extends KeyPrefix<FallbackNs<Ns>> = undefined,
+> = (
+  ns?: Ns,
+  options?: UseTranslationOptions<KPrefix>,
+) => UseTranslationResponse<FallbackNs<Ns>, KPrefix>
 export type AppWithTranslation = typeof appWithTranslation
 export type TFunction = I18NextTFunction
 export type I18n = I18NextClient
 export type WithTranslationHocType = typeof withTranslation
-export type WithTranslation = ReactI18nextWithTranslation
+export type WithTranslation<
+  Ns extends FlatNamespace | $Tuple<FlatNamespace> | undefined = undefined,
+  KPrefix extends KeyPrefix<FallbackNs<Ns>> = undefined,
+> = ReactI18nextWithTranslation<Ns, KPrefix>
 export type InitPromise = Promise<TFunction>
 export type CreateClientReturn = {
   i18n: I18n