如何为TypeScript组件的test属性推导正确联合类型？

问题描述 #

我有一个描述表格的对象，其中包含dataFields数组，数组项包含必填string类型的name、label，以及可选string类型的field。希望根对象中的test属性类型为：每个dataField项若存在field则取其值，否则取name值的联合类型。当前的类型定义无法实现该需求，请问test应定义为何种类型？

原代码实现：

type FieldType<Name extends string, Field extends string> = {
  name: Name;
  label?: string;
  field?: Field;
}


type ComponentProps<Name extends string, Field extends string> = {
  dataFields: FieldType<Name, Field>[],
  test?: Field | Name; // 这里的类型不符合需求
  // test?: Field extends string ? Field : Name; // 同样不正确
}

const component = <Name extends string, Field extends string>(props: ComponentProps<Name, Field>) => {}


component({
  dataFields: [
    { name: 'surname', label: 'FIELD1', field: 'my_surname' },
    { name: 'name', label: 'FIELD2', field: 'my_name' },
    { name: 'patronymic', label: 'FIELD3' },
  ],
  test: 'surname' // 期望类型是 'my_surname' | 'my_name' | 'patronymic'，而非'surname'或'name'
})

解决方案 #

要实现这个需求，需要调整泛型的设计思路：让泛型直接绑定到dataFields的具体数组类型上，而非单独提取Name和Field。通过工具类型遍历数组元素，动态提取每个项的目标值类型。

修改后的代码如下：

// 定义基础字段类型
type FieldType = {
  name: string;
  label?: string;
  field?: string;
}

// 工具类型：从单个FieldType项中提取目标值（有field取field，无field取name）
type ExtractFieldOrName<T extends FieldType> = T extends { field: infer F } ? F : T['name'];

// 组件Props类型，泛型约束为FieldType数组
type ComponentProps<T extends FieldType[]> = {
  dataFields: T;
  // 提取数组所有元素的目标值，组成联合类型
  test?: ExtractFieldOrName<T[number]>;
}

// 组件函数，自动推导泛型类型
const component = <T extends FieldType[]>(props: ComponentProps<T>) => {}

// 测试用例
component({
  dataFields: [
    { name: 'surname', label: 'FIELD1', field: 'my_surname' },
    { name: 'name', label: 'FIELD2', field: 'my_name' },
    { name: 'patronymic', label: 'FIELD3' },
  ],
  test: 'my_surname' // 符合预期，类型检查通过
  // test: 'surname' // 此处会触发类型错误，符合需求
})

核心逻辑说明 #

• 工具类型ExtractFieldOrName：通过条件类型判断当前字段项是否包含field属性，若存在则提取field的字面量类型，否则提取name的字面量类型。
• 泛型绑定数组类型：ComponentProps的泛型T直接约束为FieldType[]，T[number]会得到数组中所有元素的联合类型，再通过ExtractFieldOrName处理每个元素，最终生成精确的联合类型。
• 自动类型推导：当传入具体的dataFields数组时，TypeScript会自动识别每个元素的字面量类型，从而让test属性的类型严格匹配需求。

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