TypeScript中如何定义嵌套类型的约束？

当然可以在TypeScript中定义这类关联型的类型约束，核心思路是通过泛型传递类型关联关系，结合映射类型和索引访问类型来实现动态约束。针对你给出的场景，我们可以重构类型定义，让SelectProps的options和value严格依赖于FormProps中options的结构：

步骤1：重构基础类型与泛型约束 #

首先调整基础类型定义，引入泛型来关联FormProps和SelectProps的类型依赖：

// 单个选项的类型
type Option = {
  value: string;
  label: string;
};

// 泛型SelectProps：依赖外部传入的Options类型，动态约束options和value
type SelectProps<Options extends Record<string, Option[]>> = {
  [K in keyof Options]: {
    options: K;
    // 取Options[K]数组中任意元素的value类型
    value: Options[K][number]['value'];
  }
}[keyof Options];

// 泛型FormProps：接收Options类型参数，关联selects和options的结构
type FormProps<Options extends Record<string, Option[]>> = {
  selects: SelectProps<Options>[];
  options: Options;
};

步骤2：使用约束后的类型 #

定义具体的选项结构时，用as const让TypeScript推导精确的字面量类型（而不是宽泛的string），这样才能实现对value的严格校验：

const testOptions = {
  alpha: [
    { value: "1", label: "first" },
    { value: "2", label: "second" },
    { value: "3", label: "third" }
  ] as const
};

// 自动推导Options类型，校验selects的合法性
const test: FormProps<typeof testOptions> = {
  options: testOptions,
  selects: [
    { options: "alpha", value: "1" }, // ✅ 合法
    // { options: "alpha", value: "4" }, // ❌ 报错："4"不在alpha选项的value集合中
    // { options: "beta", value: "4" }, // ❌ 报错："beta"不是options的有效键
  ]
};

关键逻辑说明 #

• 泛型传递：通过Options泛型参数，把FormProps中options的具体结构传递给SelectProps，实现父子类型的关联。
• 映射类型：SelectProps通过[K in keyof Options]遍历所有选项组的键，为每个键生成对应的约束类型，最后通过[keyof Options]合并为联合类型，确保selects中的每个元素都符合某一组选项的要求。
• 索引访问类型：Options[K][number]['value']用于获取指定选项组中所有元素的value类型集合，实现对value的精确校验。
• as const断言：保留选项数组中value的字面量类型，避免TypeScript将其宽泛化为string，确保约束的有效性。

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