i18next/react-i18next下划线消息标签类型转换异常解决方案咨询

问题原因 #

使用typeof MessageData作为i18next资源类型时，TypeScript或i18next的类型系统会错误转换JSON中带下划线的Key（如payment_information），导致类型提示与实际Key不匹配。

解决步骤 #

1. 修正TS配置确保JSON类型推断正确 #

在tsconfig.json中启用以下配置项，保证JSON文件的Key能被TypeScript正确识别：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

2. 显式定义资源类型（替代typeof隐式推断） #

放弃依赖typeof MessageData的自动推断，手动定义与JSON结构完全一致的接口，确保Key原样保留：

// 定义与JSON结构严格匹配的接口
interface TranslationResources {
  profile: {
    payment_information: string;
  };
}

declare module 'i18next' {
  interface CustomTypeOptions {
    resources: {
      translation: TranslationResources;
    };
  }
}

3. 自动生成类型（可选） #

如果不想手动维护接口，可以用工具从JSON文件自动生成类型定义，比如使用ts-json-schema-generator生成对应类型文件，保证Key的完整性和准确性。

4. 验证修复效果 #

调用t函数时输入profile.payment_information，检查类型提示是否正确识别该Key，无错误转换情况。

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