TypeScript中导入JSON文件并赋值给变量的问题排查

问题原因 #

你遇到的核心问题是：使用import * as en导入JSON文件时，得到的是模块包装对象而非实际的JSON数据。JSON内容被存储在该模块对象的default属性中，直接返回模块对象会导致无法通过点语法访问JSON属性（因为这些属性属于default内部的对象，而非模块本身）。

解决方案 #

方案1：使用默认导入JSON文件 #

直接导入JSON的默认导出（即实际的JSON对象），这是最简洁的方式。需要确保你的tsconfig.json中启用了resolveJsonModule和esModuleInterop配置（TypeScript处理JSON模块的必要设置）。

// helper-functions.ts
import en from '../../src/assets/i18n/en.json';
import de from '../../src/assets/i18n/de.json';

export const translationHandle = () => {
  return Cypress.env('LANG') === 'en' ? en : de;
};

// 其他文件中使用
const lang = translationHandle();
console.log(lang.errors.invalidEmail); // 正常访问

方案2：访问模块对象的default属性 #

如果坚持使用命名空间导入，需显式返回模块对象的default属性（该属性存储了JSON内容）。

// helper-functions.ts
import * as en from '../../src/assets/i18n/en.json';
import * as de from '../../src/assets/i18n/de.json';

export const translationHandle = () => {
  return Cypress.env('LANG') === 'en' ? en.default : de.default;
};

// 其他文件中使用
const lang = translationHandle();
console.log(lang.errors.invalidEmail); // 正常访问

关键TypeScript概念解析 #

1. JSON模块处理：当tsconfig.json中启用resolveJsonModule时，TypeScript会将JSON文件视为合法模块，整个JSON对象会作为模块的default导出。
2. 命名空间导入（import * as x）：该语法会将模块的所有导出项合并到一个对象中。对于JSON模块，这个对象包含default属性（对应JSON内容），部分环境可能会额外暴露顶层JSON键作为命名导出，但不建议依赖此特性。
3. 默认导入：直接导入模块的default导出，对于JSON文件来说，这就是你需要的实际JSON对象，可直接通过点语法访问其属性。

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