如何在TypeScript中启用指向i18next JSON翻译键的跳转声明功能

以下是无需第三方插件的几种可行方案：

1. 显式导入翻译文件并关联类型约束 #

直接在代码中导入目标翻译JSON文件，通过keyof typeof将翻译键与文件内容绑定，让IntelliJ能通过类型追踪定位到定义：

// 导入翻译文件
import enTranslations from './locales/en.json';
// 定义翻译键类型为JSON文件的键集合
type TranslationKey = keyof typeof enTranslations;

// 重写t函数的类型（或在i18next初始化时绑定类型）
const t = (key: TranslationKey) => i18next.t(key);

// 使用时Ctrl+左键即可跳转到en.json中的对应键
t('welcome.message');

2. 优化d.ts类型定义，关联实际JSON文件 #

修改你的类型声明文件，直接引用翻译JSON的类型而非手动维护，让编辑器能通过类型关联找到源文件：

// 导入翻译文件
import enTranslations from './locales/en.json';

declare module 'i18next' {
  interface CustomTypeOptions {
    defaultNS: 'translation';
    // 直接使用JSON文件的类型作为resources的类型
    resources: {
      translation: typeof enTranslations;
    };
  }
}

这种方式下，TS已经能识别无效键，现在编辑器可以通过类型系统追踪到JSON文件中的定义位置。

3. 确保JSON文件被IntelliJ正确识别 #

检查翻译JSON文件的类型：右键文件 → Mark as JSON，避免文件被识别为纯文本导致跳转功能失效。

4. 完善tsconfig配置 #

确保tsconfig.json中以下选项正确设置，保证TS能正确解析JSON模块：

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

这些方案的核心是让TypeScript类型系统与实际的JSON翻译文件建立直接关联，IntelliJ就能借助TS的类型信息实现跳转功能，无需依赖第三方插件。

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