Typoskript Tastaturereignis: Argument vom Typ ‚Ereignis‘ ist nicht zuordenbare Parameter vom Typ ‚Keyboard‘

Question

I'have des folgenden Fehler, auch wenn der Code perfekt laufen:

"TS2345: Argument of type 'Event' is not assignable to parameter of type 'KeyboardEvent'. 
    Property 'altKey' is missing in type 'Event'." 

// In a Class 

public listenTo = (window: Window) => { 
    ['keydown', 'keyup'].forEach(eventName => { 
    window.addEventListener(eventName, e => { 
     this.handleEvent(e); // <- error here 
    }); 
    }); 
} 

public handleEvent = (event: KeyboardEvent) => { 
    const { key } = event; 
    //... 
} 

Ich habe versucht, den Ereignistyp zu definieren, zu KeyboardEvent, aber ich habe den folgenden Fehler:

window.addEventListener(eventName, (e:KeyboardEvent) => { 
      this.handleEvent(e); // <- error here 
     }); 


TS2345: Argument of type '(event: KeyboardEvent) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'. 
    Type '(event: KeyboardEvent) => void' is not assignable to type 'EventListenerObject'. 
Property 'handleEvent' is missing in type '(event: KeyboardEvent) => void'. 

Gibt es eine Möglichkeit, das Problem zu durchlaufen oder zu lösen?

Answer 1

TypeScript ist hier nicht in der Lage, den vollen Sprung zu machen, da alles, was es weiß, der Ereignisname ist, ist eine Zeichenkette, also wird der allgemeinste Ereignistyp verwendet.

Beispiele unten umgerechnet auf einem Stand-alone-Beispiel läuft - so habe ich Dinge gemacht „aus der Klasse“ für die Demo ...

Während die Saiten keydown sind und keyup Sie die Art Sicherheit garantieren kann, und außer Kraft setzen, den Compiler:

let listenTo = (window: Window) => { 
    ['keydown', 'keyup'].forEach(eventName => { 
    window.addEventListener(eventName, e => { 
     handleEvent(<any>e); 
    }); 
    }); 
} 

let handleEvent = (event: KeyboardEvent) => { 
    const { key } = event; 
    //... 
} 

Dies würde umfallen, wenn eine andere Zeichenfolge zu Ihrem Array von Ereignisnamen hinzugefügt wurde.

Volltypsicherheit ist verfügbar, wenn eine Zeichenfolge direkt aufgrund spezialisierte Signaturen:

window.addEventListener('keydown', e => { 
    handleEvent(e); // e is KeyboardEvent 
    }); 

So könnten Sie Ihre Array geben stärker die richtigen Typen Güte zu bekommen:

type KeyboardEventNames = 'keydown' | 'keyup'; 

let listenTo = (window: Window) => { 
    const eventNames: KeyboardEventNames[] = ['keydown', 'keyup']; 
    eventNames.forEach(eventName => { 
    window.addEventListener(eventName, e => { 
     handleEvent(e); 
    }); 
    }); 
} 

let handleEvent = (event: KeyboardEvent) => { 
    const { key } = event; 
    //... 
} 

In In diesem letzten Beispiel weisen wir den Typ der Elemente im Array nur auf die Namen von Tastaturereignissen zurück, sodass der Compiler jetzt weiß, dass er nicht nur mit einer alten Zeichenfolge arbeitet und den Ereignistyp ableiten kann.