Angular 7升级至16时导入JSON对象报TS2339错误求助

问题原因 #

Angular 16配套的TypeScript版本（如5.x系列）对JSON模块导入的类型检查机制更严格，而Angular 7使用的低版本TypeScript默认将导入的JSON对象视为any类型，因此直接访问属性不会触发类型错误。升级后TS会自动推断JSON的具体类型（或视为unknown），若未显式定义类型，访问属性时就会抛出TS2339错误。

解决方案 #

1. 显式定义JSON类型并做类型断言 #

假设你导入的config.json内容如下：

{
  "apiBaseUrl": "https://your-domain.com/api",
  "timeout": 5000
}

在组件/服务中导入时，先定义对应类型，再通过类型断言转换：

import rawConfig from './config.json';

// 定义与JSON结构匹配的类型
interface AppConfig {
  apiBaseUrl: string;
  timeout: number;
}

// 转换为指定类型
const appConfig = rawConfig as AppConfig;

// 正常访问属性
console.log(appConfig.apiBaseUrl);

2. 配置tsconfig.json启用JSON模块类型推断 #

在项目根目录的tsconfig.json中，确保compilerOptions包含以下配置：

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

开启resolveJsonModule后，TypeScript会自动根据JSON文件内容生成对应的类型，无需手动定义简单结构的JSON类型。但如果JSON结构复杂或存在动态字段，仍建议手动定义类型以获得更准确的类型检查。

3. 临时应急：断言为any（不推荐） #

如果需要快速临时解决问题，可以直接将导入的JSON对象断言为any类型，但这会失去TypeScript的类型检查能力，不建议长期使用：

import config from './config.json';
const appConfig = config as any;

console.log(appConfig.apiBaseUrl);

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