e.charcode in TypeScript

Question

我不明白为什么不起作用

const addRate = (e: { charCode: KeyboardEvent }) => {
if (e.charCode >= 48) {
...
}
}

我得到这个：

'Operator '>=' cannot be applied to types 'KeyboardEvent' and 'number'.ts(2365)'

但e.charcode实际上是KeyboardEvent，这在我的应用上的其他地方也有效

const addString = (e: { target: HTMLInputElement }) => ....

Answer 1

有两个问题：

1. 是charCode，而不是charcode。

2. 您错误地应用了参数类型，它应该是：

   const addRate = ({ charCode }: KeyboardEvent) => {
   

   您需要将事件类型应用于正在销毁的整个参数。

请注意，charCode已弃用(尽管它永远不会消失(，新代码应该使用code和/或key(取决于事件(。

---

在评论中，你问过你如何"；这样做"使用CCD_ 8处理程序。但change事件不是KeyboardEvent，它只是Event(实际上，React的类型为它定义了ChangeEvent，所以type可能是字符串文字类型"change"，而不是字符串(。然后你说你想同时处理这两件事。

您可以通过指定事件为Event(或者在React中为ChangeEvent(或KeyboardEvent，然后根据它是否是键盘事件进行分支：

import React, { ChangeEvent, KeyboardEvent } from "react";
function Example() {
const addRate = (e: ChangeEvent | KeyboardEvent) => {
// ...code that doesn't care which event it is...
if ("key" in e) {
// Here, TypeScript will kow that `e` is a `KeyboardEvent`
// ...code that needs to know the `code` or `key`...
}
};
return <input type="text" onChange={addRate} onKeyDown={addRate} />;
}

游乐场链接