如何配置TypeScript以在react-i18n中对缺失的翻译参数抛出错误

我之前也被这个问题坑过好几次——明明翻译里明确要求传参数，结果调用时忘了传，直到运行时才发现问题！好在TypeScript完全能帮我们在开发阶段就揪出这种疏漏，只要做对下面这几步配置：

一、给翻译资源加上精确的类型锁定 #

先把你的翻译文件从.js改成.ts，然后在导出资源的时候加上as const，这一步是关键，能让TypeScript精准记住每个翻译键对应的字符串里包含哪些插值变量：

// src/i18n/en.ts
export const en = {
  test: 'string with {{var}}',
  // 其他翻译项可以继续加在这里
} as const;

接着在i18n的初始化文件里导入这个资源，同样用as const导出resources，确保最细致的类型信息不丢失：

// src/i18n/index.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { en } from './en';

export const resources = {
  en,
} as const;

i18n.use(initReactI18next).init({
  resources,
  lng: 'en',
  interpolation: {
    escapeValue: false, // React本身会自动转义内容，这里直接设为false就行
  },
});

export default i18n;

二、扩展i18next的类型定义 #

新建或者修改你的类型声明文件（比如src/i18n.d.ts），让i18next明确知道你的翻译资源结构，这样它才能把翻译键和对应的必填参数绑定起来：

import { resources } from './i18n';

declare module 'i18next' {
  interface CustomTypeOptions {
    defaultNS: 'en'; // 换成你实际项目中使用的默认命名空间
    resources: typeof resources.en;
  }
}

三、确保TypeScript配置足够严格 #

打开项目根目录的tsconfig.json，把strict模式设为true——这是TypeScript做严格类型检查的基础，很多细粒度的类型提示都依赖这个配置：

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

四、验证配置效果 #

现在你再试试之前的错误写法：

// 这行代码会立刻触发TypeScript错误：提示缺少必填属性"var"
<>{t('test')}</>
// 同样，这个Trans组件的写法也会报错
<Trans t={t} i18nKey="test"></Trans>

只有当你传入正确的参数时，错误才会消失：

// 正确写法：传入var参数
<>{t('test', { var: '我的测试变量' })}</>
// Trans组件的正确写法
<Trans t={t} i18nKey="test" var="我的测试变量"></Trans>

如果你的项目用了自定义命名空间，只需要在CustomTypeOptions里把defaultNS改成对应的命名空间，或者在调用t函数时通过ns参数指定，TypeScript同样能正确推断出对应键的必填参数。

内容来源于stack exchange