如何用TypeScript映射类型实现关联UserForm的Form接口？

可以通过嵌套映射类型+索引访问类型实现完全关联UserForm的自动生成，无需手动枚举每个角色：

实现代码 #

type UserForm = 'student' | 'teacher';
type FormFields = 'name' | 'age' | 'email';

// 自动关联UserForm的Form类型
type Form = {
  form: {
    // 遍历每个用户角色类型
    [U in UserForm]: {
      // 为当前角色生成所有带前缀的字段
      [F in FormFields as `${U}${Capitalize<F>}`]: string
    }
  }[UserForm]; // 索引访问自动交叉合并所有角色的字段集合
};

逻辑说明 #

1. 外层遍历UserForm中的每个角色（student/teacher），为每个角色单独生成一组带前缀的字段映射；
2. 通过[UserForm]索引访问这个临时对象类型时，TypeScript会自动将所有角色对应的字段类型交叉合并成一个完整的对象；
3. 后续如果UserForm新增角色（比如'admin'），或者FormFields新增字段，Form类型会自动同步更新对应的结构，完全不需要手动修改。

验证效果 #

生成的Form类型结构和目标完全一致：

interface Form {
  form: {
    studentName: string;
    studentAge: string;
    studentEmail: string;
    teacherName: string;
    teacherAge: string;
    teacherEmail: string;
  }
}

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