如何在TypeScript中实现自引用类型校验约束表单配置？

我想要构建一个TypeScript类型，确保requiredFields数组中注册的所有字段都在defaults里配置完成。当defaults缺少requiredFields中的任何字段名，或者字段值和对应项的options不匹配时，要抛出类型错误。

requiredFields需要具备灵活性，整个对象是静态确定的（不会在运行时求值），而且我想用相同的类型逻辑配置多个不同版本，避免遗漏defaults的注册。

预期报错的示例代码 #

const configuration: FormConfiguration = {
  defaults: { // 预期：因缺少`numbers`字段报错
    letters: 'f', // 预期：因'f'不在`letters`的options中报错
  },
  requiredFields: [
    {
      name: 'letters',
      options: ['a', 'b', 'c'],
    },
    {
      name: 'numbers',
      options: [1, 2, 3],
    },
  ],
}

我之前的失败尝试 #

type Names = FormConfiguration['requiredFields'][number]['name']
// 结果：type Names = string

type Options =
  FormConfiguration['requiredFields'][number]['options'][number]
// 结果：type Options = string | number

type FormConfiguration = {
  requiredFields: Array<{
    name: string
    options: (string | number)[]
  }>
  defaults: Record<Names, Options>
}

这种写法既做不到自引用，也没法为每个字段获取对应正确的选项类型，想问这种需求到底能不能实现？

当然可以实现，核心是用泛型关联requiredFields和defaults的类型，同时用as const让TypeScript推导出数组的具体字面量类型，而不是宽泛的string或number。

1. 定义泛型核心类型 #

我们需要一个泛型类型FormConfiguration<T>，其中T代表requiredFields的具体结构，这样就能从T中精准提取每个字段的名称和对应的选项类型：

type FormConfiguration<T extends readonly { name: string; options: readonly any[] }[]> = {
  requiredFields: T;
  defaults: {
    // 遍历所有requiredFields中的字段名
    [K in T[number]['name']]: 
      // 提取当前字段对应的options元素类型
      Extract<T[number], { name: K }>['options'][number]
  };
};

2. 用as const固定字面量类型 #

TypeScript默认会把数组元素推断为宽泛类型（比如string[]而非['a','b','c']），所以必须用as const保留具体的字面量值，才能准确校验defaults：

// 先定义固定结构的requiredFields
const requiredFields = [
  {
    name: 'letters',
    options: ['a', 'b', 'c'],
  },
  {
    name: 'numbers',
    options: [1, 2, 3],
  },
] as const;

// 正确配置：无报错
const validConfig: FormConfiguration<typeof requiredFields> = {
  defaults: {
    letters: 'a',
    numbers: 2,
  },
  requiredFields,
} as const;

3. 验证报错场景 #

现在只要defaults不符合要求，TypeScript会准确抛出错误：

// 错误示例1：缺少numbers字段
const invalidConfig1: FormConfiguration<typeof requiredFields> = {
  defaults: {
    letters: 'a',
    // 报错提示：Property 'numbers' is missing
  },
  requiredFields,
} as const;

// 错误示例2：letters的值不在选项中
const invalidConfig2: FormConfiguration<typeof requiredFields> = {
  defaults: {
    letters: 'f', // 报错提示：Type '"f"' is not assignable to type '"a" | "b" | "c"'
    numbers: 2,
  },
  requiredFields,
} as const;

简化写法（无需单独变量） #

如果不想单独提取requiredFields变量，可以直接在泛型中传入字面量类型：

const configuration: FormConfiguration<[
  { name: 'letters'; options: ['a', 'b', 'c'] },
  { name: 'numbers'; options: [1, 2, 3] }
]> = {
  defaults: {
    letters: 'a',
    numbers: 2,
  },
  requiredFields: [
    { name: 'letters', options: ['a', 'b', 'c'] },
    { name: 'numbers', options: [1, 2, 3] },
  ],
} as const;

关键逻辑说明 #

• 泛型约束：T extends readonly { name: string; options: readonly any[] }[]确保T是符合结构的只读数组，配合as const才能保留字面量类型。
• 映射类型：[K in T[number]['name']]遍历requiredFields的所有字段名，生成defaults的键集合。
• 类型提取：Extract<T[number], { name: K }>['options'][number]针对每个字段名，精准提取对应项的options元素类型，确保defaults的值必须是对应选项中的一个。

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