在TypeScript中如何为导入的JSON文件生成对应的类型？

方法1：手动定义类型（适合结构简单且变动少的场景） #

根据你给出的JSON结构，直接手动编写对应的接口类型即可：

// 单条应用配置的类型定义
interface Application {
  id: string;
  name: string;
  apiName: string;
  apiPath: string;
}

// 完整导入的JSON数据的类型（Application数组）
type ApplicationsData = Application[];

你可以直接把这个类型用到导入的JSON数据上：

import applicationsData from "../data/applications.json";
const typedData: ApplicationsData = applicationsData;

方法2：自动推导精确类型（推荐，无需手动维护） #

因为TypeScript本身可以识别导入的JSON的完整结构，你可以直接用typeof操作符从实际导入的数据里提取类型，还能得到更严格的字面量类型（比如id的类型会是所有实际存在的id值的联合，而不是宽泛的string）：

import applicationsData from "../data/applications.json";

// 提取单条应用数据的类型
type Application = typeof applicationsData[number];
// 提取整个JSON数组的类型
type ApplicationsData = typeof applicationsData;

这个方案的优势是不需要手动同步类型，后续你修改JSON文件的内容/结构，类型会自动更新，不会出现类型和实际数据不一致的问题。

方法3：批量生成类型声明文件（适合多份JSON的大型项目） #

如果你的项目里有大量静态JSON文件需要生成类型，可以安装npm社区的JSON转TS类型工具，本地执行命令即可批量生成.d.ts类型声明文件，无需手动编写。

注意事项 #

如果你的TS环境无法识别JSON导入，需要在tsconfig.json中开启以下配置（NextJS官方脚手架默认已经开启）：

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

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