如何在Elmish应用中使用Fable监听键盘并获取按键消息？

在Fable环境下，addEventListener回调的默认参数类型是通用Event，而keyCode是KeyboardEvent专属的属性，所以必须先把事件对象转换为KeyboardEvent类型才能访问该属性。

下面提供两种可行的解决方式：

方式一：通过类型断言转换事件对象 #

let keyDown initial =
    let sub dispatch =
        document.addEventListener("keydown", fun e ->
            // 将通用Event转换为KeyboardEvent类型
            let kbEvent = e :?> KeyboardEvent
            dispatch (KeyDown kbEvent.keyCode))
    Cmd.ofSub sub

方式二：直接指定回调参数的类型 #

let keyDown initial =
    let sub dispatch =
        // 明确声明参数e为KeyboardEvent类型
        document.addEventListener("keydown", fun (e: KeyboardEvent) ->
            dispatch (KeyDown e.keyCode))
    Cmd.ofSub sub

额外提示 #

keyCode是已被废弃的API，存在浏览器兼容性问题，更推荐使用以下替代属性：

• e.key：返回按键对应的字符（比如按下A键返回"a"，回车键返回"Enter"）
• e.code：返回按键的物理位置标识（比如按下A键返回"KeyA"，回车键返回"Enter"）

内容的提问来源于stack exchange，提问作者redcurry