什么 Typescript 类型是 Angular2 事件

Question

如果我在 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 输入是什么？

Answer 1

根据官方event 是Object 类型，在我的情况下，当我将event 类型转换为对象时，它不会抛出任何错误，但在阅读angular2 的文档后发现event 是类型EventEmitter 这样您就可以在 EventEmitter 中输入您的活动种姓

看到这里是相同的http://plnkr.co/edit/8HRA3bM0NxXrzBAjWYXc?p=previewplunkr

更多信息请参考这里https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding

Answer 2

正如@AlexJ 所建议的那样

您通过$event传递的事件是一个DOM事件，因此您可以使用EventName作为类型。

在您的情况下，此事件是 MouseEvent，文档说，引用

MouseEvent 接口表示由于用户与定点设备（例如鼠标）交互而发生的事件。使用该接口的常见事件包括click、dblclick、mouseup、mousedown。

在所有这些情况下，您都会收到MouseEvent。

另一个例子：如果你有这个代码

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

当事件触发时，你会得到一个FocusEvent。

所以你可以很简单地做到这一点，控制台记录事件，你会看到一条与此类似的消息，我们将拥有事件名称

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

您可以随时访问文档以获取现有 Events 的列表。

编辑

您还可以检查 TypeScript dom.generated.d.ts 并移植所有类型。在您的情况下，stopPropagation() 是Event 的一部分，由MouseEvent 扩展。

Answer 3

一些常用的事件及其相关名称（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 |               |

通用Event 关联到：

• 关闭
• 改变
• 无效
• 播放
• 重置
• 滚动
• 选择
• 提交
• 切换
• 等待中

如果您深入了解Typescript's repository, dom.generated.d.ts provides a global events interface（归功于Eric's answer），您可能会在line 5752 找到所有事件处理程序映射：

interface GlobalEventHandlersEventMap {
    "abort": UIEvent;
    "animationcancel": AnimationEvent;
    "animationend": AnimationEvent;
    "animationiteration": AnimationEvent;
    "animationstart": AnimationEvent;
    "auxclick": MouseEvent;
    "beforeinput": InputEvent;
    "blur": FocusEvent;
    "cancel": Event;
    "canplay": Event;
    "canplaythrough": Event;
    "change": Event;
    "click": MouseEvent;
    "close": Event;
    "compositionend": CompositionEvent;
    "compositionstart": CompositionEvent;
    "compositionupdate": CompositionEvent;
    "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;
    "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;
}