Тип Typescript - это Angular2 событие

Если у меня есть следующая кнопка в HTML файле

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

Также в соответствующем компоненте у меня есть эта функция

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

Есть ли правильный тип, который должен быть назначен на вход $event? Сам параметр события является объектом, НО, если я назначу его объекту типа, я получаю сообщение об ошибке

Свойство stopPropogation не существует для объекта типа

Итак, что Typescript рассматривает как ввод $event?

Ответы

Ответ 1

Как предложено @AlexJ

Событие, которое вы прошли через $event, является событием DOM, поэтому вы можете использовать EventName как тип.

В вашем случае это событие MouseEvent, и в документах говорится, цитируя

Интерфейс MouseEvent представляет события, которые происходят из-за взаимодействия пользователя с указывающим устройством (таким как мышь). Общие события, использующие этот интерфейс, включают клик, dblclick, mouseup, mousedown.

Во всех этих случаях вы получите MouseEvent.

Другой пример: если у вас есть этот код

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

Когда событие запускается, вы получите FocusEvent.

Итак, вы можете сделать это очень просто, консоль зарегистрировать событие, и вы увидите сообщение, подобное этому, которое будет иметь имя события

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

Вы всегда можете посетить документы для списка существующих События.

Edit

Вы также можете проверить TypeScript dom.generated.d.ts со всеми портированными символами. В вашем случае stopPropagation() является частью Event, расширенным на MouseEvent.

Ответ 2

В соответствии с официальным event имеет тип Object, также в моем случае, когда я typecaste event к объекту он не выдает никакой ошибки, но после чтения документации angular2 найдено event типа EventEmitter, чтобы вы могли ввести кастовое событие в EventEmitter

см. здесь plunkr для того же http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=preview

для получения дополнительной информации см. здесь https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

Ответ 3

Я уверен, что проблема не связана с вашим кодом. Я думаю, что что-то с вашей настройкой не так.

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

производит этот вывод

тестирование: я что-то делаю VM1901 app.ts! Transpiled: 26MouseEvent {isTrusted: true, screenX: 2878, screenY: 504, clientX: 67, clientY: 73...}

См. также https://plnkr.co/edit/xxaQbh?p=preview

Ответ 4

Некоторые часто используемые события и связанные с ними имена (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 |               |

Общее событие связано с:

  • близко
  • изменить
  • недействительный
  • играть
  • сброс
  • прокручивать
  • выберите
  • представить
  • тумблер
  • ждет

Если вы перейдете в репозиторий Typescript, dom.generated.d.ts предоставит интерфейс глобальных событий (кредит Эрика), где вы можете найти все сопоставления обработчиков событий в строке 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;
}