javascript - Hur man lägger till passivt alternativ till addEventListener i TypeScript?
jag vill lägga till alternativ till scroll-händelsen för ett element i TypeScript på detta sätt:
element.addEventListener("scroll", () => { }, { capture: true, passive: true });
Men TypeScript ger ett syntaxfel: Argument of type '{ capture: true, passive: true }' is not assignable to parameter of type 'boolean'.
Jag vet att orsaken till felet är att TypeScript inte definierar ett options-argument för addEventListener. Det har bara ett useCapture-argument. Vi kan se det i lib.dom.d.ts:
addEventListener<K extends keyof ElementEventMap>(type: K, listener: (this: Element, ev: ElementEventMap[K]) => any, useCapture?: boolean): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
Jag hittade ett öppet ärende och en lösning på GitHub men det verkar komplicerat och jag är inte säker på att det är rätt.
Förresten, jag vill också veta varför TypeScript inte definierade options-argumentet för addEventListener?
All hjälp skulle uppskattas. Tack!
Svar #1
Som en lösning för situationer som denna kan du alltid kasta ditt objekt till typen any.
(<any>element).addEventListener("scroll", () => { }, { capture: true, passive: true });
Typen any används för att välja bort Typescripts typningssystem. Det betyder att du kommer att arbeta med en okänd typ som du kan hantera på vilket sätt du vill, utan att TypeScript-kompilatorn klagar.
Du kan läsa mer om vilken typ som helst här!
Svar #2
Eftersom gränssnitt i Typescript är öppna kan du lägga till funktioner i Document-gränssnittet genom att deklarera om det i din applikation:
interface Document {
addEventListener(event: "scroll", listener: (event: Event) => void, options?: {
passive?: boolean;
once?: boolean;
capture?: boolean;
}
);
}
Då kommer du att kunna använda den överlagring du definierade, eller någon överlagring (eller någon annan metod) definierad för Document i lib.d.ts:
document.addEventListener("scroll", ()=> {}, {
capture: true,
once: true
});
document.addEventListener("scroll", ()=> {}, true);
Jag kan inte uttala mig om varför detta inte inkluderades, det kan finnas vissa hörnfall där det kan störa metodupplösningen för andra överlagringar av addEventListener. (Observera: Jag har inte testat detta omfattande, så du kan stöta på detta problem).
