Jakim typem Typescript jest zdarzenie Angular2

Jeśli mam następujący przycisk w pliku html

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

Również w odpowiednim komponencie mam tę funkcję

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

Czy istnieje odpowiedni typ, który należy przypisać do $eventwejścia? Sam parametr zdarzenia jest obiektem, ALE jeśli przypiszę go do obiektu typu, pojawia się błąd

Właściwość „stopPropogation” nie istnieje w obiekcie typu

Więc co uważa Typescript za dane $eventwejściowe?

Zgodnie z sugestią @AlexJ

Zdarzenie, przez które przeszedłeś, $eventjest zdarzeniem DOM, dlatego możesz użyć EventNamejako typu.

W twoim przypadku tym wydarzeniem jest a MouseEvent, a dokumentacja mówi, cytując

MouseEvent interfejs reprezentuje zdarzenia, które występują na skutek interakcji użytkownika z urządzeniem wskazującym (takich jak mysz). Typowe zdarzenia korzystające z tego interfejsu obejmują kliknięcie, dwukrotne kliknięcie, przesunięcie myszy, przesunięcie myszy .

We wszystkich tych przypadkach otrzymasz plik MouseEvent.

Inny przykład: jeśli masz ten kod

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

Gdy zdarzenie się uruchomi, otrzymasz plik FocusEvent.

Więc możesz to zrobić naprawdę prosto, zarejestruj zdarzenie w konsoli, a zobaczysz komunikat podobny do tego, który będzie miał nazwę zdarzenia

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

W każdej chwili możesz odwiedzić dokumentację, aby zobaczyć listę istniejących wydarzeń .

Edytować

Możesz również sprawdzić, czy nie ma TypeScript dom.generated.d.tsze wszystkimi przeniesionymi typami. W Twoim przypadku stopPropagation()jest to część Event, rozszerzona o MouseEvent.

Niektóre często używane zdarzenia i powiązane z nimi nazwy ( 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 |               |

Zdarzenie ogólne jest powiązane z:

• blisko
• zmiana
• nieważny
• grać
• Resetowanie
• zwój
• Wybierz
• Zatwierdź
• przełącznik
• Czekanie

Jeśli zagłębisz się w repozytorium Typescript , dom.generated.d.ts zapewnia globalny interfejs zdarzeń (uznanie należy do odpowiedzi Erica ), w którym możesz znaleźć wszystkie mapowania obsługi zdarzeń w wierszu 5725 :

interface GlobalEventHandlersEventMap {
  "abort": UIEvent;
  "animationcancel": AnimationEvent;
  "animationend": AnimationEvent;
  "animationiteration": AnimationEvent;
  "animationstart": AnimationEvent;
  "auxclick": MouseEvent;
  "blur": FocusEvent;
  "cancel": Event;
  "canplay": Event;
  "canplaythrough": Event;
  "change": Event;
  "click": MouseEvent;
  "close": Event;
  "contextmenu": MouseEvent;
  "cuechange": Event;
  "dblclick": MouseEvent;
  "drag": DragEvent;
  "dragend": DragEvent;
  "dragenter": DragEvent;
  "dragexit": Event;
  "dragleave": DragEvent;
  "dragover": DragEvent;
  "dragstart": DragEvent;
  "drop": DragEvent;
  "durationchange": Event;
  "emptied": Event;
  "ended": Event;
  "error": ErrorEvent;
  "focus": FocusEvent;
  "focusin": FocusEvent;
  "focusout": FocusEvent;
  "gotpointercapture": PointerEvent;
  "input": Event;
  "invalid": Event;
  "keydown": KeyboardEvent;
  "keypress": KeyboardEvent;
  "keyup": KeyboardEvent;
  "load": Event;
  "loadeddata": Event;
  "loadedmetadata": Event;
  "loadend": ProgressEvent;
  "loadstart": Event;
  "lostpointercapture": PointerEvent;
  "mousedown": MouseEvent;
  "mouseenter": MouseEvent;
  "mouseleave": MouseEvent;
  "mousemove": MouseEvent;
  "mouseout": MouseEvent;
  "mouseover": MouseEvent;
  "mouseup": MouseEvent;
  "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;
  "securitypolicyviolation": SecurityPolicyViolationEvent;
  "seeked": Event;
  "seeking": Event;
  "select": Event;
  "selectionchange": Event;
  "selectstart": Event;
  "stalled": Event;
  "submit": Event;
  "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;
  "wheel": WheelEvent;
}

Według oficjalnego eventjest to typ Object, również w moim przypadku, gdy eventwpisuję do Objecta, nie powoduje to żadnego błędu, ale po przeczytaniu dokumentacji znalezionego angular2 eventjest typu, EventEmitterwięc możesz wpisać caste swoje wydarzenie wEventEmitter

zobacz tutaj jest plunkr dla tego samego http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview

Więcej informacji można znaleźć tutaj https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding