扩展i18next翻译函数遇TypeScript类型错误，求解决方案

问题核心 #

你遇到的重定义错误，是因为直接在i18next模块声明中重新导出t变量，和i18next原生的t声明冲突；同时当前类型定义未正确对接react-i18next的类型系统，导致键校验失效。

正确的类型扩展方案 #

无需重新声明t，通过扩展react-i18next的CustomTypeOptions接口注入翻译键类型，这是官方推荐的标准方式：

1. 修改i18n.d.ts类型文件 #

import 'react-i18next';
import deTranslation from 'src/translation/de-translation.json';

// 递归生成嵌套翻译键的类型
type NestedKeys<T> = T extends object
  ? { [K in keyof T]: K | `${K & string}.${NestedKeys<T[K]>}` }[keyof T]
  : never;

// 导出翻译文件的键类型
type TranslationKeys = NestedKeys<typeof deTranslation>;

// 扩展react-i18next的自定义类型选项
declare module 'react-i18next' {
  interface CustomTypeOptions {
    defaultNS: 'translation'; // 替换为你的默认命名空间
    resources: {
      translation: typeof deTranslation;
    };
    translationKeys: TranslationKeys;
  }
}

2. 对齐i18n初始化代码 #

确保初始化时的资源配置和类型定义一致：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import deTranslation from './src/translation/de-translation.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      de: {
        translation: deTranslation,
      },
    },
    lng: 'de',
    defaultNS: 'translation',
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

3. 正确使用t函数 #

通过useTranslation hook获取t，此时TypeScript会自动提供键提示并校验合法性：

import { useTranslation } from 'react-i18next';

const ExampleComponent = () => {
  const { t } = useTranslation();
  // 此处会自动提示有效键，输入不存在的键会触发TypeScript错误
  return <div>{t('property.mortgage.mortgage_status')}</div>;
};

方案说明 #

• 直接在i18next模块声明t会和原生声明冲突，扩展CustomTypeOptions是官方指定的类型扩展入口，能无缝对接react-i18next的hook系统。
• 递归类型NestedKeys会自动解析JSON翻译文件的嵌套结构，生成所有合法的键路径。

额外配置要求 #

确保tsconfig.json中compilerOptions.resolveJsonModule设为true，否则无法正确导入JSON文件的类型。

内容的提问来源于stack exchange，提问作者Skip