TypeScript：如何将字符串收窄为嵌套对象的可辨识联合键

需要处理一个双重嵌套对象，从用户输入的animal和product字符串中安全获取对应description，核心痛点：

• 第一层键（animal）容易收窄，但第二层键（product）无法自动关联到对应animal的合法键集合
• 不想写冗长的switch语句或使用类型断言（as）
• 需要防范用户切换animal后传入不匹配的product

1. 从对象自动推导精确类型 #

先利用TypeScript的类型推导，从jsonObject生成所需类型，避免手动定义40+动物和产品的联合类型：

const jsonObject = {
  cow: {
    milk: { chemicalState: "liquid", value: 10, description: "for putting on cereal" },
    cheese: { chemicalState: "solid", value: 25, description: "for putting on sandwiches" },
  },
  pig: {
    bacon: { chemicalState: "solid", value: 100, description: "for putting on everything" },
    pork: { chemicalState: "solid", value: 50, description: "for dinner" },
  },
  // ... 其他30+对象
} as const; // 锁定类型，避免TypeScript自动拓宽为宽泛的string类型

// 推导所有动物类型："cow" | "pig" | ...
type Animal = keyof typeof jsonObject;

// 推导指定动物对应的产品类型：例如AnimalProduct<"cow"> = "milk" | "cheese"
type AnimalProduct<A extends Animal> = keyof typeof jsonObject[A];

2. 方案一：泛型类型守卫实现精确类型收窄 #

编写关联animal和product的泛型类型守卫，确保product是当前animal的合法键：

// 类型守卫：验证product是否属于指定animal的合法产品集合
function isValidProductForAnimal<A extends Animal>(
  animal: A,
  product: string
): product is AnimalProduct<A> {
  return product in jsonObject[animal];
}

// 安全获取description的函数
function getDescription(animal: string, product: string): string | undefined {
  // 第一步：检查animal是否合法
  if (!(animal in jsonObject)) return undefined;
  
  const typedAnimal = animal as Animal;
  // 第二步：检查product是否匹配当前animal的合法产品
  if (!isValidProductForAnimal(typedAnimal, product)) return undefined;
  
  // 此时TypeScript能自动收窄类型，确认product是typedAnimal的合法键
  return jsonObject[typedAnimal][product].description;
}

该方案类型精确，编译器能完全识别product与animal的关联关系，避免联合类型混乱。

3. 方案二：双重索引签名简化实现（JCalz建议方案） #

若不需要极致的类型精确性，可将对象类型拓宽为双重索引签名，结合undefined检查快速实现安全访问：

// 定义拓宽后的类型
type AnimalProducts = {
  [animal: string]: {
    [product: string]: { description: string } | undefined;
  } | undefined;
};

// 将原对象适配为拓宽后的类型（仅用于类型检查，运行时无变化）
const typedJsonObject: AnimalProducts = jsonObject;

function getDescription(animal: string, product: string): string {
  const animalObj = typedJsonObject[animal];
  if (!animalObj) throw new Error(`无效的动物类型：${animal}`);
  
  const productObj = animalObj[product];
  if (!productObj) throw new Error(`动物${animal}不存在产品${product}`);
  
  return productObj.description;
}

该方案代码简洁，无需复杂泛型，适合快速落地，同时能防范用户输入不匹配的异常。

4. 结合Headless UI Combobox场景优化 #

因为参数来自联动的Combobox，可从前端和函数层双重保障：

• 前端在切换animal时同步更新product的可选列表，从根源减少不匹配情况
• 函数层保留校验逻辑，返回undefined或抛出明确错误，前端可据此提示用户

• 追求精确类型约束选方案一，通过泛型类型守卫关联animal与product的类型
• 追求简洁快速落地选方案二，用双重索引签名+undefined检查
• 两种方案均避免了冗长switch和as断言，同时覆盖了用户输入的异常场景

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