如何在TypeScript中基于JSON数组的foo值创建联合类型

步骤1：配置TypeScript并导入JSON文件 #

先在tsconfig.json中开启resolveJsonModule选项，确保能直接导入JSON文件：

{
  "compilerOptions": {
    "resolveJsonModule": true,
    // 其他编译配置...
  }
}

接着导入你的JSON文件，并用typeof获取它的静态类型：

// 替换为你的JSON文件实际路径
import data from './your-data.json';

// 获取JSON数组对应的TypeScript类型
type DataArray = typeof data;

步骤2：自动生成目标联合类型 #

利用TypeScript的索引访问特性，直接提取数组中所有对象的foo属性值，自动生成联合类型：

type Bars = DataArray[number]['foo'];

此时Bars就会被推导为"bar1" | "bar2" | ...，完全匹配JSON文件中所有foo字段的取值。

简单原理 #

• typeof data会把JSON的静态结构转换成TypeScript可识别的类型
• DataArray[number]指向数组中任意元素的类型（也就是每个带foo属性的对象）
• ['foo']访问该对象的foo属性类型，TypeScript会自动将所有元素的foo值合并为联合类型

注意事项 #

• 这是静态类型推导，JSON文件内容更新后，需要重新编译TypeScript代码才能同步类型
• 如果JSON里的foo字段存在多种类型的值（比如字符串+数字），联合类型也会自动包含这些类型

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