我想創建一個函式 addEventListener
這個函式有兩個引數，theevent和 the listener。
我有一些特定的事件：例如。onScroll, onClick, onDoubleClick.
根據event我想為listener引數使用單獨的簽名/型別。
所以如果我開始輸入：
addEventListener('onClick', (param: OnClickType) => // here I want to resolve a certain listener type )
// or
addEventListener('onScroll', (param: OnScrollType) => // here I want to resolve a certain listener type )
這在打字稿中可能嗎？
[編輯]
像這樣的東西：
[編輯2]
export type OnClick = (event: 'onclick', listener: (x: number) => void) => void
export type OnScroll = (event: 'onscroll', listener: (x: string) => void) => void
export type EventListener = OnClick | OnScroll;
const addEventListener: EventListener = (ev, ls) => {
console.log(ev, ls);
return;
}
addEventListener('onclick', )
我想要的是listener根據第一個引數 ( event)的值來推斷函式 ( )的第二個引數的型別。
uj5u.com熱心網友回復：
如果您只有幾個硬編碼的函式型別，例如OnClickand OnScroll：
type OnClick = (event: 'onclick', listener: (x: number) => void) => void
type OnScroll = (event: 'onscroll', listener: (x: string) => void) => void
并且您想說 anEventListener可以像所有這些一樣運行，您可以手動將兩個呼叫簽名重寫為單個多載函式型別：
type EventListener = {
(event: 'onclick', listener: (x: number) => void): void;
(event: 'onscroll', listener: (x: string) => void): void;
}
const addEventListener: EventListener = (ev, ls) => {
console.log(ev, ls);
return;
}
addEventListener('onclick', x => console.log(x.toFixed(2))); // okay
addEventListener('onscroll', x => console.log(x.toUpperCase())); // okay
等效地，您可以撰寫EventListener為現有函式型別的交集：
type EventListener = OnClick & OnScroll;
這將兩個呼叫簽名放入同一型別，作為多載函式型別，OnClick簽名在先，OnScroll簽名在后。因此，當您呼叫 an 時EventListener，編譯器將首先嘗試決議OnClick呼叫簽名，然后OnScroll在失敗時回傳。由于"onclick"和"onscroll"是互斥的，所以這里的順序并不重要。但是在某些情況下，呼叫簽名決議的順序確實很重要，然后型別的F1 & F2行為將與F2 & F1（這可能令人驚訝，因為交叉在概念上是無序的）。
如果您有一堆不同的事件名稱和負載型別，并且您不想為每個這樣的對手動寫出一個呼叫簽名，您可以放棄多呼叫簽名多載，轉而使用單個通用函式：
interface EventMap {
onclick: number;
onscroll: string;
}
type EventListener = <E extends keyof EventMap>(
event: E, listener: (x: EventMap[E]) => void
) => void;
這行為類似（之前的 和 呼叫addEventListener()仍然有效），但現在您可以EventMap為每個新的事件名稱/有效負載型別對添加一個新行。
Playground 鏈接到代碼
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/383528.html
標籤：javascript 打字稿 打字稿打字 打字稿泛型