将 window.event 处理程序添加到打字稿答案

【问题标题】：Adding window.event handler to typescript将 window.event 处理程序添加到打字稿
【发布时间】：2016-07-29 13:46:50
【问题描述】：

通常当我想在 js 中捕获页面上的事件时：

window.onkeydown = function (event) {
    //Do something here
}

我似乎无法弄清楚（或谷歌）如何在打字稿中做到这一点。对于我正在使用的设置，页面有一个ts 文件，它正在加载的类有一个ts 文件。

【问题讨论】：

【解决方案1】：

这个

window.addEventListener('keydown', keyDownListener, false)

window 定义将lib.d.ts 中的所有事件和这个特定的侦听器作为

 addEventListener(type: "keydown", listener: (ev: KeyboardEvent) => any, useCapture?: boolean): void;

或者这个，如果你想保持你原来的“风格”，

window.onkeydown = (ev: KeyboardEvent): any => {
     //do something
}

【讨论】：

【解决方案2】：

为了更清楚地回答：

const controlDown = (event: KeyboardEvent) => {
    console.log(event);
};
window.addEventListener('keydown', controlDown);

【讨论】：

获取Type '(event: React.KeyboardEvent<Element>) => void' is not assignable to type 'EventListener'.
如果在 React 中使用它，请确保您不会意外使用 import { KeyboardEvent } from "react";。这会导致not assignable to type 'EventListener' 异常。相反，必须使用 globalThis 中的 KeyboardEvent（即只需删除 import 语句）