¿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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.