如何在Typescript中找到事件类型

Question

这是我的模板

<input (keyup)="onKey($event)">

这是我的打字稿文件

onKey(event:any) {
  console.log(typeof event);
}

console.log输出object但实际上应该是KeyboardEvent。

是否有通用的方法来查找事件类型？

Answer 1

您可能只想检查event.type以查看它是什么，并从中推断出类型。

否则，您可以尝试使用event instanceof KeyboardEvent或user-defined type guards。

此外，在您的示例中，您只需创建参数event:KeyboardEvent而不是event:any。

Answer 2

console.log输出对象，但实际上它应该是KeyboardEvent。

否，因为KeyboardEvent不是一个类，而是一个接口（将TS代码转换为JS时不再存在）。

在您的特定情况下，您可以“确定”获得“类型” KeyboardEvent的对象，并且只需在回调函数中注释正确的类型即可，如您在此处看到的：https://github.com/microsoft/TypeScript/blob/master/lib/lib.dom.d.ts#L19705 < / p>

由于事件“类型”被定义为接口，因此您无法执行event instanceof KeyboardEvent来检查其类型。

相反，您需要检查type属性。但是，仅凭该检查并不能为您推断出TS中的类型。

这意味着，例如，当您有一个ErrorEvent对象时，它将不起作用：

if (event.type === "error") {
    console.log(event.message);  // ERROR: property "message" does not exist on type Event
}

所以最好的办法可能是创建一个这样的类型保护：

function isErrorEvent(event: Event): event is ErrorEvent {
    return event.type === "error";
}

然后像这样使用它：

if (isErrorEvent(event)) {
    console.log(event.message);  // OK
}