如何基于TypeScript enum key创建对应变更事件的条件类型

问题原因 #

你原来的条件类型写法是直接对IInput['type']（也就是整个inputTypes枚举的联合类型）做判断，TypeScript不会自动拆解联合类型的每个成员做条件匹配，因此整个联合不满足extends inputTypes.dropdown的判断，始终返回FormChangeEventHandler，自然达不到预期效果。

正确实现方案 #

1. 定义带泛型的条件类型

给事件类型增加泛型参数，用于接收具体的输入框类型，同时设置默认值为全量枚举，直接使用时就可以得到你要的联合类型：

// 泛型约束为inputTypes枚举，默认值为全量枚举
export type OnInputChange<T extends inputTypes = inputTypes> = 
  T extends inputTypes.dropdown 
    ? DropDownChangeEventHandler 
    : FormChangeEventHandler;

2. 配套调整IInput（可选，方便自动类型推导）

如果需要输入框配置和事件类型自动绑定，把IInput也调整为泛型结构即可：

export interface IInput<T extends inputTypes = inputTypes> {
  id: string;
  type: T;
  name: string;
  onChange: OnInputChange<T>;
}

用法示例

// 直接使用得到联合类型：DropDownChangeEventHandler | FormChangeEventHandler
type AllInputChange = OnInputChange;

// 传入具体枚举值拿到对应事件类型
type DropdownChange = OnInputChange<inputTypes.dropdown>; // 等于DropDownChangeEventHandler
type TextChange = OnInputChange<inputTypes.text>; // 等于FormChangeEventHandler

// 类型守卫自动收窄
function handleInputConfig(input: IInput) {
  if (input.type === inputTypes.dropdown) {
    // 此处input.onChange自动推导为DropDownChangeEventHandler类型
  } else {
    // 此处input.onChange自动推导为FormChangeEventHandler类型
  }
}

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