TypeScript 2中导入JSON文件报错求助（不使用RequireJS）

嘿，我之前在TS 2项目里也碰到过一模一样的问题！不用慌，咱们根据你的TS具体版本分两种情况来解决，完全不用依赖RequireJS：

情况1：你的TypeScript版本是2.9及以上 #

TS 2.9新增了resolveJsonModule配置项，专门用来支持直接导入JSON文件，这是最省心的方案：

1. 先修改你的tsconfig.json，补全以下配置：

{
  "compilerOptions": {
    "module": "commonjs", // 或者根据你的项目用ES6/ESNext，只要不是AMD就行
    "resolveJsonModule": true,
    "esModuleInterop": true, // 解决ES模块和CommonJS模块互导的语法问题
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"] // 确保你的JSON文件和TS文件都在这个范围内
}

2. 然后直接用ES模块语法导入JSON：

import appConfig from './app-config.json';
console.log(appConfig.apiUrl); // 正常访问JSON里的属性

情况2：你的TypeScript版本在2.9以下 #

这个版本还没有resolveJsonModule，就得靠你创建的.d.ts声明文件来做类型声明，但大概率是之前的声明写法不对：

1. 把你创建的.d.ts文件（比如命名为json-modules.d.ts）内容改成：

declare module "*.json" {
  const content: any;
  export default content;
}

如果需要更精确的类型（不想用any），也可以把any换成你JSON对应的接口类型，比如：

interface AppConfig {
  apiUrl: string;
  timeout: number;
}

declare module "*.json" {
  const content: AppConfig;
  export default content;
}

2. 确保tsconfig.json的include数组包含这个声明文件，比如：

{
  "compilerOptions": {
    "module": "commonjs", // 同样选适合你项目的模块系统
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*", "./json-modules.d.ts"]
}

3. 之后就可以用同样的ES模块语法导入JSON了，完全不用RequireJS。

常见排查点 #

如果还是报错，检查这几点：

• 确认JSON文件的路径是否正确，导入时的相对路径别写错
• 确保tsconfig.json里的exclude数组没有不小心排除了JSON文件或者声明文件
• 如果用webpack之类的构建工具，不用额外加json-loader（TS会自己处理），但如果是旧版webpack，可能需要确保它能识别JSON文件

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