I have successfully integrated i18next with typescript and generated resource types from JSON using i18next-resources-for-ts. Everything is functioning as expected, however I am encountering an issue when using prefixed namespaces with the t function from the useTranslation() hook. I am specifically referring to cases where I don't want to use useTranslation('common') or t('auth.login.text', { ns: 'common' }), which work correctly and are properly typed.
Below is a simplified version of my i18next.d.ts:
import 'i18next';
import common from '../public/locales/en/common.json';
const resources = {
common,
} as const;
declare module 'i18next' {
interface CustomTypeOptions {
returnNull: false;
defaultNS: 'common';
resources: typeof resources;
}
}
and setup of i18next.ts
import commonDe from '../public/locales/de/common.json';
import commonEn from '../public/locales/de/common.json';
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
const resources = {
de: {
common: commonDe,
},
en: {
common: commonEn,
},
};
export const defaultNS = 'common';
i18next
.use(initReactI18next)
.init({
resources,
ns: [defaultNS],
defaultNS,
lng: 'en',
interpolation: {
escapeValue: false,
},
returnNull: false,
});
export default i18next;
The issue arises when trying to use a prefixed namespace in the t function:
const { t } = useTranslations();
t('common:auth.login.text')
In this case, the typings do not work as expected.
I understand that I can specify ns as options for the t function or pre-select it in the useTranslation hook. However, I would like to also support the prefixed approach as shown above in the translation key. Any suggestions on how to achieve this would be highly appreciated. Thank you!