javascript - Aký typ TypeScriptu je udalosť Angular2

Ak mám nasledujúce tlačidlo v html súbore

<button (click)="doSomething('testing', $event)">Do something</button>

Tiež, v príslušnej komponente mám túto funkciu

doSomething(testString: string, event){
    event.stopPropagation();
    console.log(testString + ': I am doing something');
}

Existuje vhodný typ, ktorý by mal byť priradený k vstupu $event? Parameter event sám o sebe je objekt, ALE ak ho priradím k typu objekt, dostanem chybu

Vlastnosť 'stopPropogation' neexistuje na type objekt

Takže, čo považuje Typescript za vstup $event?

Odpoveď č. 1

Ako navrhol @AlexJ

Udalosť, ktorou ste prešli $event, je DOM udalosť, preto môžete použiť EventName ako typ.

Vo vašom prípade je táto udalosť MouseEvent a dokumentácia hovorí, citujem

Rozhranie MouseEvent predstavuje udalosti, ktoré nastávajú v dôsledku interakcie používateľa so zariadením na ukazovanie (napríklad myšou). Bežné udalosti využívajúce toto rozhranie zahŕňajú click, dblclick, mouseup, mousedown.

Vo všetkých týchto prípadoch dostanete MouseEvent.

Ďalší príklad: ak máte tento kód

<input type="text" (blur)="event($event)"

Keď sa spustí udalosť, dostanete FocusEvent.

Takže to môžete urobiť naozaj jednoducho, záznam do konzoly udalosti a uvidíte správu podobnú tejto, ktorá bude mať názov udalosti

FocusEvent {isTrusted: true, relatedTarget: null, view: Window, detail: 0, which: 0…}

Vždy môžete navštíviť dokumentáciu pre zoznam existujúcich udalostí.

Upraviť

Môžete si tiež skontrolovať TypeScript dom.generated.d.ts so všetkými prevedenými typmi. Vo vašom prípade je stopPropagation() súčasťou Event, ktorý je rozšírený o MouseEvent.

Odpoveď č. 2

Niektoré bežne používané udalosti a ich príslušné názvy (MouseEvent, FocusEvent, TouchEvent, DragEvent, KeyboardEvent):

| MouseEvent | FocusEvent |  TouchEvent | DragEvent | KeyboardEvent |
|:----------:|:----------:|:-----------:|:---------:|:-------------:|
|    click   |    focus   |  touchstart |    drag   |    keypress   |
|   mouseup  |    blur    |  touchmove  |    drop   |     keyup     |
| mouseleave |   focusin  | touchcancel |  dragend  |    keydown    |
|  mouseover |  focusout  |   touchend  |  dragover |               |

Generická udalosť je spojená s:

• zatvoriť
• zrušiť
• zmeniť
• neplatný
• hrať
• resetovať
• posunúť
• koniec rolovania
• vybrať
• prepínač
• čakanie

Ak sa budete prehrabávať v repozitári Typescriptu, dom.generated.d.ts poskytuje mapovanie všetkých globálnych obslúh udalostí (zásluha patrí Ericovej odpovedi) v rozhraní GlobalEventHandlersEventMap:

interface GlobalEventHandlersEventMap {
    "abort": UIEvent;
    "animationcancel": AnimationEvent;
    "animationend": AnimationEvent;
    "animationiteration": AnimationEvent;
    "animationstart": AnimationEvent;
    "auxclick": MouseEvent;
    "beforeinput": InputEvent;
    "blur": FocusEvent;
    "cancel": Event;
    "canplay": Event;
    "canplaythrough": Event;
    "change": Event;
    "click": MouseEvent;
    "close": Event;
    "compositionend": CompositionEvent;
    "compositionstart": CompositionEvent;
    "compositionupdate": CompositionEvent;
    "contextmenu": MouseEvent;
    "copy": ClipboardEvent;
    "cuechange": Event;
    "cut": ClipboardEvent;
    "dblclick": MouseEvent;
    "drag": DragEvent;
    "dragend": DragEvent;
    "dragenter": DragEvent;
    "dragleave": DragEvent;
    "dragover": DragEvent;
    "dragstart": DragEvent;
    "drop": DragEvent;
    "durationchange": Event;
    "emptied": Event;
    "ended": Event;
    "error": ErrorEvent;
    "focus": FocusEvent;
    "focusin": FocusEvent;
    "focusout": FocusEvent;
    "formdata": FormDataEvent;
    "gotpointercapture": PointerEvent;
    "input": Event;
    "invalid": Event;
    "keydown": KeyboardEvent;
    "keypress": KeyboardEvent;
    "keyup": KeyboardEvent;
    "load": Event;
    "loadeddata": Event;
    "loadedmetadata": Event;
    "loadstart": Event;
    "lostpointercapture": PointerEvent;
    "mousedown": MouseEvent;
    "mouseenter": MouseEvent;
    "mouseleave": MouseEvent;
    "mousemove": MouseEvent;
    "mouseout": MouseEvent;
    "mouseover": MouseEvent;
    "mouseup": MouseEvent;
    "paste": ClipboardEvent;
    "pause": Event;
    "play": Event;
    "playing": Event;
    "pointercancel": PointerEvent;
    "pointerdown": PointerEvent;
    "pointerenter": PointerEvent;
    "pointerleave": PointerEvent;
    "pointermove": PointerEvent;
    "pointerout": PointerEvent;
    "pointerover": PointerEvent;
    "pointerup": PointerEvent;
    "progress": ProgressEvent;
    "ratechange": Event;
    "reset": Event;
    "resize": UIEvent;
    "scroll": Event;
    "scrollend": Event;
    "securitypolicyviolation": SecurityPolicyViolationEvent;
    "seeked": Event;
    "seeking": Event;
    "select": Event;
    "selectionchange": Event;
    "selectstart": Event;
    "slotchange": Event;
    "stalled": Event;
    "submit": SubmitEvent;
    "suspend": Event;
    "timeupdate": Event;
    "toggle": Event;
    "touchcancel": TouchEvent;
    "touchend": TouchEvent;
    "touchmove": TouchEvent;
    "touchstart": TouchEvent;
    "transitioncancel": TransitionEvent;
    "transitionend": TransitionEvent;
    "transitionrun": TransitionEvent;
    "transitionstart": TransitionEvent;
    "volumechange": Event;
    "waiting": Event;
    "webkitanimationend": Event;
    "webkitanimationiteration": Event;
    "webkitanimationstart": Event;
    "webkittransitionend": Event;
    "wheel": WheelEvent;
}