如何在TypeScript中检测按键？

Question

在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属性。那么我如何检测按下哪个键而不会出现TypeScript编译错误和丑陋的红色波浪线呢？

- Alwyn

Answer 1

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

myFunc(data : string, evt : KeyboardEvent)

如果您想同时移除evt.enterKey的错误，您需要通过扩展接口来添加它 - 尽管我不知道这是否是一个真正的属性，因为它不是技术控制键，如CTRL，SHIFT或ALT，它们都在事件上具有属性：

interface KeyboardEvent {
    enterKey: boolean;
}

- Fenton

Answer 2

对于 React 用户

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

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

这是所有支持的 HTML 元素的列表（从第 32-90 行）。

- Damian Green

Answer 3

您需要注册事件，例如：

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

愉快地编程吧！

- Jesus Gilberto Valenzuela

---

关键代码是已弃用的属性。 - Ievgen

Answer 4

在React中： 声明全局接口：

declare global {
  interface WindowEventMap {
    keydown: KeyboardEvent<HTMLInputElement>
  }
}

那么就直接使用它：

 const handleUserKeyPress = (event: KeyboardEvent<HTMLInputElement>) => {
    const { key } = event
      if (key === "Escape") {
        // do something
      }
  }

  useEffect(() => {
    window.addEventListener('keydown', handleUserKeyPress)

    return () => {
      window.removeEventListener('keydown', handleUserKeyPress)
    }
  })

- justdvl

Answer 5

我在分享我的经验，希望对某些人有所帮助。

如果你正在使用一个 EventListener，你不能简单地将 KeyboardEvent 作为参数传递。我使用了 as 关键字来减轻类型错误。

myElement.addEventListener('keydown', (e) => {
    if ((e as KeyboardEvent).key === 'Enter') {
        // do something..
    }
}); 

- Prabhash Rathnayake

Answer 6

你可能会喜欢Keystrokes。它是一个用TypeScript编写的小型库，用于执行这种精确的操作。

绑定单个按键

import { bindKey, bindKeyCombo } from '@rwh/keystrokes'

const handlePressed = () =>
  console.log('pressed a')

bindKey('a', handlePressed)
// -- or --
bindKey('a', {
  onPressed: handlePressed,
  onPressedWithRepeat: handlePressedRepeat,
  onReleased: handleReleased,
})

绑定一个按键组合

const handlePressed = () =>
  console.log('pressed a, released a, pressed b and c in any order')

bindKeyCombo('a, b+c', handlePressed)
// -- or --
bindKeyCombo('a, b+c', {
  onPressed: handlePressed,
  onPressedWithRepeat: handlePressedRepeat,
  onReleased: handleReleased,
})

这个示例只是展示了一个简单的处理程序绑定到一个键或键组合，但是你也可以传递一个对象，而不是一个单独的函数，它包含可选的onPressed、onPressedWithRepeat和/或onReleased的处理程序。

还有支持Vue和React的包。

- Robert Hurst