如何基于现有TypeScript类型构造新增对应change事件方法的泛型？

完全可以实现，你需要的Editable泛型可以通过TypeScript的映射类型+键重映射能力完成，实现代码如下：

// 若使用React的ChangeEvent需先导入，非React场景可自行替换回调参数类型
import type { ChangeEvent } from 'react'

type Editable<T> = T & {
  [K in keyof T as `on${Capitalize<string & K>}Change`]: (e: ChangeEvent<HTMLInputElement>) => void
}

逻辑说明： #

• 用交叉运算符&保留原始类型T的所有原有属性，满足你保留firstName、lastName的需求
• 通过映射类型遍历T的所有键，结合as语法做键重映射，用模板字符串拼接出onXxxChange格式的新键名
• 内置工具类型Capitalize用于自动将键名首字母大写，匹配你需要的命名规则
• 最后为新生成的回调属性指定对应的事件函数类型即可

代入你给出的Customer类型测试，Editable<Customer>的结构和你期望的EditableCustomer完全一致。

注意事项： #

你示例中的赋值逻辑const editable: Editable<Customer> = customer会触发类型错误，因为原始customer对象缺少所有onXxxChange回调属性，需要补充完整所有回调后才符合类型要求，示例如下：

const customer: Customer = { firstName: 'John', lastName: 'Doe' }
const editable: Editable<Customer> = {
  ...customer,
  onFirstNameChange: (e) => console.log(e.target.value),
  onLastNameChange: (e) => console.log(e.target.value)
}

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