如何检测 TypeScript 中按下的键？答案

【问题标题】：How to detect key pressed in TypeScript?如何检测 TypeScript 中按下的键？
【发布时间】：2014-07-29 06:43:33
【问题描述】：

typescript 中与 javascript 中的以下行在语义上等效的语法是什么

//Some knockout event handler.
myFunc(data : string, evt : Event) {
    //If enter or tab key up were detected add the excuse to the collection.
    if(evt.enterKey || evt.which == 9)
        //Do Something
}

我在这里遇到的麻烦与常规的 javascript 事件不同，typescript Event 类没有属性enterKey 或which。那么如何在不出现打字稿编译错误和丑陋的红色摆动下划线的情况下检测正在按下哪个键？

【问题讨论】：

标签： javascript knockout.js typescript

【解决方案1】：

需要使用更专业的事件类型KeyboardEvent，如下图：

myFunc(data : string, evt : KeyboardEvent)

如果您还想删除 evt.enterKey 的错误，则需要通过扩展接口来添加它 - 尽管我不知道这是一个真实的属性，因为它不是技术上的控制键，如 @ 987654324@、SHIFT 或 ALT，它们都有关于事件的属性：

interface KeyboardEvent {
    enterKey: boolean;
}

【讨论】：

【解决方案2】：

您需要注册该事件，例如：

class EventHandler {
    static RegisterKeyPress(input: string){
        document.getElementById(input).addListener('keypress', (e: KeyboardEvent) =>{
           //You have yout key code here
            console.log(e.keyCode);
        }
    }
}

编码愉快！

【讨论】：

【解决方案3】：

对于 React 用户

  private onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    console.log(e.key)
  }

其中HTMLDivElement 是onKeyDown 附加到的任何元素的类型。

这是所有受支持的 HTML 元素的List（第 32-90 行）。

【讨论】：