¿Qué tipo de TypeScript es el evento Angular2?

89

Si tengo el siguiente botón en un archivo html

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

Además, en el componente correspondiente, tengo esta función

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

¿Existe un tipo adecuado que deba asignarse a la $evententrada? El parámetro de evento en sí es un objeto, PERO si lo asigno a un objeto de tipo, aparece un error

La propiedad 'stopPropogation' no existe en el objeto de tipo

Entonces, ¿qué considera Typecript la $evententrada?

javascript typescript angular Alex J
fuente
5
doSomething(testString: string, event: MouseEvent)
Eric Martinez
1
Eric Martinez: ¿Puedes publicar tu comentario como respuesta? Eso aclaró todas las banderas que estaba recibiendo, así que lo estoy tomando como correcto.
Alex J

Respuestas:

74

Como lo sugirió @AlexJ

El evento por el que pasó $eventes un evento DOM, por lo tanto, puede usar EventNamecomo tipo.

En su caso, este evento es un MouseEvent, y los documentos dicen, citando

La interfaz MouseEvent representa eventos que ocurren debido a que el usuario interactúa con un dispositivo señalador (como un mouse). Los eventos comunes que utilizan esta interfaz incluyen clic, doble clic, mouseup, mousedown .

En todos esos casos obtendrá un MouseEvent.

Otro ejemplo: si tienes este código

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

Cuando se active el evento, obtendrá un FocusEvent.

Para que pueda hacerlo realmente simple, registre el evento en la consola y verá un mensaje similar a este que tendrá el nombre del evento.

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

Siempre puede visitar los documentos para obtener una lista de los eventos existentes .

Editar

También puede verificar TypeScript dom.generated.d.tscon todas las mecanografías portadas. En tu caso stopPropagation()es parte de Event, ampliado por MouseEvent.

Eric Martinez
fuente
Vea esta respuesta para un tipo HTMLInputEvent.
hlovdal
1
Cabe señalar que si el evento se origina a partir de un componente angular a través de un @Outputcampo de tipo EventEmitter<T>, normalmente un componente , entonces el tipo del $eventargumento es T. Consulte angular.io/api/core/EventEmitter .
jfroy
26

Algunos eventos de uso común y sus nombres relacionados ( 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 |               |

El Evento genérico está asociado a:

  • cerrar
  • cambio
  • inválido
  • tocar
  • Reiniciar
  • Desplazarse
  • Seleccione
  • enviar
  • palanca
  • esperando

Si busca en el repositorio de Typescript , dom.generated.d.ts proporciona una interfaz de eventos globales (el crédito es para la respuesta de Eric ) donde puede encontrar todas las asignaciones de controladores de eventos en la línea 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;
}
CPHPython
fuente