如何在Remix-TypeScript（Bluestack应用）中用i18next实现翻译键自动补全？

适配扁平目录结构的配置步骤 #

你的Remix项目采用无src的扁平目录结构，只需调整i18next的类型声明文件路径，就能实现翻译键的自动补全，具体操作如下：

1. 补全依赖 #

如果尚未安装类型相关依赖，执行以下命令：

npm install --save-dev @types/i18next typescript

2. 创建类型声明文件 #

在项目根目录创建i18next.d.ts文件，内容如下：

import 'i18next';
// 导入你的英文翻译文件
import enTranslations from './public/locales/english/en/index.json';

declare module 'i18next' {
  interface CustomTypeOptions {
    defaultNS: 'index';
    resources: {
      en: typeof enTranslations;
    };
  }
}

3. 配置tsconfig.json #

确保tsconfig.json的include数组包含刚创建的声明文件，让TypeScript能识别它：

{
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "i18next.d.ts"
  ],
  // 保留原有其他配置
}

4. 验证自动补全 #

在组件中使用useTranslation时，就能获得翻译键的自动提示：

import { useTranslation } from 'react-i18next';

export default function DemoComponent() {
  const { t } = useTranslation('index');
  // 输入t('')时会自动弹出index.json中的所有翻译键
  return <div>{t('welcome.message')}</div>;
}

常见问题排查 #

• 若自动补全无反应，重启VSCode的TypeScript服务（快捷键Ctrl+Shift+P，选择「TypeScript: Restart TS Server」）
• 检查i18next.d.ts中翻译文件的路径是否正确，确保和实际文件位置匹配
• 确认i18next初始化配置里的defaultNS和声明文件中的defaultNS保持一致

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