前言
键盘是计算机操作中非常基础的一种输入设备，而前端开发中也有很多需要用到键盘控制的场景，比如游戏、交互等等。如果每次都自己手写键盘事件的监听，那么劳动成本是非常高的。而 npm 包 keyboard-ts 则提供了一个便捷的方式来监听键盘事件，并且支持 TypeScript，下面我们就来学习一下如何使用 keyboard-ts。
安装
使用 npm 安装 keyboard-ts：
npm install keyboard-ts
使用
- 导入 keyboard-ts：
import Keyboard from 'keyboard-ts'
- 实例化一个键盘对象：
const keyboard = new Keyboard(document)
这里传入的参数是网页中一个文档对象，用来监听键盘事件。
- 监听键盘事件：
keyboard.down(['a', 's', 'd'], (event: KeyboardEvent) => {
console.log(`Key ${event.key} is pressed.`)
})这里监听了键盘上的 a、s、d 键，并且当其中有一个键被按下时就会触发回调函数，并输出按下的键。当然，也可以监听单个键：
keyboard.down('enter', (event: KeyboardEvent) => {
console.log('Enter key is pressed.')
})除了 down，还有 up、press 三种监听方式，具体的区别可以查看文档。同时也可以在监听时指定作用域 scope，以防止监听事件的冲突。
- 取消监听：
keyboard.off(['a', 's', 'd'])
这里取消了监听的 a、s、d 键按下事件，当然也可以取消单个键的监听。
示例代码
下面是一个简单的例子，监听了 W、A、S、D 四个方向键的按下事件，并通过操作角色的位置来移动角色：
-- -------------------- ---- -------
------ -------- ---- -------------
----- -------- - --- ------------------
----- ------ - ---------------------------------
--- - - -
--- - - -
----- ---- - --
------------------- ---- ---- ----- ------- -------------- -- -
------ ----------- -
---- ---- - -- ----- ------
---- ---- - -- ----- ------
---- ---- - -- ----- ------
---- ---- - -- ----- ------
-
---------------------- - ------------------ --------
--总结
keyboard-ts 是一个方便的 npm 包，可以帮助我们快速监听键盘事件，减少了很多重复的代码编写工作。同时，也为我们提供了许多灵活的配置，让我们更加轻松地实现键盘控制的逻辑。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f85238a385564ab6c79