如何创建仅接受另一类型属性列表的TypeScript泛型FormField类型？

你需要的是让每个表单字段的name和value严格关联到传入类型的属性，同时附加checked属性。可以通过映射类型+联合类型的组合实现：

// 单个表单字段的类型：为T的每个属性生成匹配的name/value/checked结构
type FormFieldItem<T> = {
  [K in keyof T]: {
    name: K;
    value: T[K];
    checked: boolean;
  };
}[keyof T];

// FormField是单个字段类型的数组
type FormField<T> = FormFieldItem<T>[];

验证示例 #

interface User { name: string; age: number; }
// 完全合法的定义
const userForm: FormField<User> = [
  { name: "name", value: "Toto", checked: false },
  { name: "age", value: 30, checked: true }
];

interface House { width: number; height: number; }
// 完全合法的定义
const houseForm: FormField<House> = [
  { name: "width", value: 100, checked: true },
  { name: "height", value: 50, checked: false }
];

// 以下代码会触发类型错误，符合预期
// const invalidForm: FormField<User> = [
//   { name: "name", value: 123, checked: false } // 错误：value应为string类型
// ];

原理说明 #

• FormFieldItem<T>先通过映射类型遍历T的所有属性，为每个属性生成对应的字段结构；再通过[keyof T]将映射结果转换为联合类型，确保每个字段的name和value类型严格绑定。
• FormField<T>作为该联合类型的数组，既限制了name只能是T的属性名，也保证了value的类型与对应属性完全匹配，同时强制要求包含checked布尔属性。

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