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']>;    
}