typescript 枚举键的条件类型

Question

我虽然这很简单，但显然我错了。 如何基于枚举键创建简单的条件类型？ 像这样：

export enum inputTypes {
  text = 'text',
  email = 'email',
  password = 'password',
  number = 'number',
  date = 'date',
  textarea = 'textarea',
  dropdown = 'dropdown',
  checkbox = 'checkbox',
}

export interface IInput {
  id: string,
  type: inputTypes,
  name: string,
}

以及基于 inputType 的条件类型：

export type onInputChange =
IInput['type'] extends inputTypes.dropdown
? DropDownChangeEventHandler
: FormChangeEventHandler;

我已经尝试了keyof typeof keyof typeof的一些变体并且无法达到我正在尝试的内容。

我需要的最终结果是，如果输入类型是下拉列表，我希望有一个不同的更改事件。 所以我的type onInputChange将等于： DropDownChangeEventHandler | FormChangeEventHandler DropDownChangeEventHandler | FormChangeEventHandler以及稍后在代码中，执行类型保护并为下拉更改事件获取正确的类型。

Answer 1

我不确定我是否正确理解了您要执行的操作，但我认为问题可能与您对onInputChange类型的条件有关：

export type onInputChange =
   IInput['type'] extends inputTypes.dropdown
   ? DropDownChangeEventHandler
   : FormChangeEventHandler;

你在这里说的是：如果IInput接口上的属性type扩展了'dropdown'则给我输入DropDownChangeEventHandler否则给我输入FormChangeEventHandler 。

关键是条件永远不会为真，因为您将IInput上的type定义为inputTypes 。 枚举类型定义了每个枚举成员和'foo' | 'bar' extends 'foo'的联合。 'foo' | 'bar' extends 'foo'永远是假的。

我想，您实际上想要检查的不是IInput接口上的type属性的类型，而是该接口的特定实现上的type属性的类型。 显然，这些信息只有在您实现接口后才可用。

一种方法可能是使用 generics：

export type onInputChange<T> =
    T extends inputTypes.dropdown
    ? DropDownChangeEventHandler
    : FormChangeEventHandler;

export class Test implements IInput {
    id: string;
    type: inputTypes.dropdown;
    name: string;
    onChange: onInputChange<Test['type']>;    
}