TypeScript errors when using multiple namaspaces using the official docs?

[gremo]

I'm using the slighly modified example explained here: https://react.i18next.com/latest/typescript. I have two namespaces, common and dialog, for the default language it:

import { resources } from './i18n/config';

declare module 'i18next' {
  interface CustomTypeOptions {
    defaultNS: 'common';
    resources: {
      common: typeof resources['it']['common'],
      dialog: typeof resources['it']['dialog'],
    };
  }
}

The configuration:

import common from './it/common.json';
import dialog from './it/dialog.json';
import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';

export const resources = {
  it: {
    common,
    dialog,
  }
} as const;

i18next.use(initReactI18next).init({
  lng: 'it',
  fallbackLng: 'it',
  ns: ['common', 'dialog'],
  defaultNS: 'common',
  debug: true,
  resources,
  interpolation: {
    escapeValue: false
  },
});

For some reason, the translation works but TypeScript complains about t('sort.title'), of course sort.title exists in dialog.json:

interface MyModalProps extends WithTranslation {}

const MyModalComponent = ({ t }) => {
  return (
    <>{t('sort.title')}</>
  );
};

export const MyModal = withTranslation('dialog')(MyModalComponent);

[gremo]

For some reason, it seems working this way:

interface MyModalProps extends WithTranslation<'dialog'> {}

Is this the intended behaviour? Using const { t } = useTranslation('dialog') works without problem.

[pedrodurek]

Hey @gremo, yes it is. 😄