如何根据输入的事件名称定义回调输入的类型

Question

例如:

type eventType = "ready" | "buzz";
type eventTypeReadyInput = {appIsReady: string};
interface mysdk {
on:(event: eventType, cb: (input: eventTypeCallbackInput) => void) => void
}
mysdk.on("ready", (readyInput) => {})

我怎样才能使它就绪输入是基于eventType而不是必须声明它像这样:

mysdk.on("ready", (readyInput: eventTypeReadyInput) => {});

希望这有意义。

Answer 1

您可以有一个查找映射类型，它为我们提供了每个Event类型与对应的input之间的关系然后使用泛型函数，你可以有条件地键入事件和它的回调输入。

type eventType = "ready" | "buzz";
type eventTypeReadyInput = {appIsReady: string};
type eventTypeBuzzInput = {appIsBuzzing: string};
type EventLookup =  {
"ready": eventTypeReadyInput,
"buzz": eventTypeBuzzInput
}

interface SDK {
on:<EType extends keyof EventLookup>(event: EType, cb: (input: EventLookup[EType]) => void) => void
}
declare let mysdk: SDK;
mysdk.on("ready", (readyInput) => { readyInput.appIsReady })
mysdk.on("buzz", (readyInput) => { readyInput.appIsBuzzing })

操场代码