TypeScript 中的 e.charcode

Question

我不明白为什么这不起作用

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

我明白了：

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

但e.charcode确实是 aKeyboardEvent并且这在我的应用程序的其他地方有效

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

Answer 1

有两个问题：

1. 它charCode不是charcode。

2. 您应用的参数类型不正确，应该是：

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

   您需要将事件类型应用于要解构的整个参数。

请注意，它charCode已被弃用（尽管它永远不会真正消失），新代码应该使用codeand/or key（取决于事件）。

在评论中，您询问了如何使用change处理程序“执行此操作”。但change事件不是 a KeyboardEvent，它只是 an Event（实际上，React 的类型ChangeEvent为它定义了 a ，大概type是字符串文字类型"change"而不是字符串）。然后你说你想同时处理这两件事。

您可以通过指定事件是Event(或者，在 React 中，a 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} />;
}

游乐场链接