Que tipo de texto é o evento Angular2

93

Se eu tiver o seguinte botão em um arquivo html

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

Além disso, no componente correspondente, tenho esta função

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

Existe um tipo adequado que deve ser atribuído à $evententrada? O parâmetro do evento em si é um objeto, MAS se eu atribuí-lo a um objeto de tipo, recebo um erro

A propriedade 'stopPropogation' não existe no tipo de objeto

Então, o que o Typescript considera a $evententrada?

javascript typescript angular Alex J
fonte
5
doSomething(testString: string, event: MouseEvent)
Eric Martinez
1
Eric Martinez: Você pode postar seu comentário como uma resposta? Isso esclareceu todas as sinalizações que eu estava recebendo, então estou entendendo como correto.
Alex J

Respostas:

77

Como sugerido por @AlexJ

O evento pelo qual você passou $eventé um evento DOM, portanto, você pode usar o EventNamecomo o tipo.

No seu caso, este evento é um MouseEvent, e a documentação diz, citando

A interface MouseEvent representa eventos que ocorrem devido à interação do usuário com um dispositivo apontador (como um mouse). Os eventos comuns que usam essa interface incluem click, dblclick, mouseup, mousedown .

Em todos esses casos, você receberá um MouseEvent.

Outro exemplo: se você tiver este código

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

Quando o evento for disparado, você receberá um FocusEvent.

Então você pode fazer de forma bem simples, o console registra o evento e você verá uma mensagem semelhante a esta que terá o nome do evento

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

Você sempre pode visitar a documentação para obter uma lista dos eventos existentes .

Editar

Você também pode verificar o TypeScript dom.generated.d.tscom todas as digitações transferidas. No seu caso, stopPropagation()faz parte de Event, estendido por MouseEvent.

Eric Martinez
fonte
Veja esta resposta para um tipo HTMLInputEvent.
hlovdal
1
Deve-se observar que, se o evento se originar de um componente Angular por meio de um @Output, normalmente um campo de componente do tipo EventEmitter<T>, então o tipo do $eventargumento é T. Consulte angular.io/api/core/EventEmitter .
jfroy
27

Alguns eventos comumente usados ​​e seus nomes 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 |               |

O evento genérico está associado a:

  • Fechar
  • mudança
  • inválido
  • Toque
  • Redefinir
  • rolagem
  • selecionar
  • enviar
  • alternancia
  • esperando

Se você vasculhar o repositório do Typescript, dom.generated.d.ts fornece uma interface de eventos globais (o crédito vai para a resposta de Eric ) onde você pode encontrar todos os mapeamentos de manipuladores de eventos na linha 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
fonte