reactjs - Typescript 和 React，React.KeyboardEvent 的编译时和运行时之间的不同类型

Question

TL;DR Object.getPrototypeOf(e.target) 返回 HTMLInputElement 但编译器说类型是 EventTarget

长:我有一个简单的输入

      <input
        className="FilterInput"
        type="text"
        placeholder="Search for names..."
        onKeyUp={filter}
      />

和一个管理过滤器的函数

    const filter = (e: React.KeyboardEvent<HTMLInputElement>) => {
        console.log(Object.getPrototypeOf(e.target)) // prints "HTMLInputElement"
        console.log((e.target as HTMLInputElement).value);
        // ... other code
    }

我试图更好地理解 Typescript 类型管理背后的理论，但是我不明白为什么我必须使用类型提示

(e.target as HTMLInputElement).value

在第二个 console.log 中。

如果我不这样做，编译器(编译时)会说 Property 'value' does not exist on type 'EventTarget'.。所以这意味着在编译时 e.target 的类型是 EventTarget。

但是，在使用 Object.getPrototypeOf(e.target) 进行测试时，类型为 HTMLInputElement(具有 value 属性) .

为什么会这样？是我的代码中的错误、与 React 相关的错误还是我缺少的 Typescript 类型管理理论的某些部分？

而且，参数声明中泛型类型的指示(e: React.KeyboardEvent<HTMLInputElement>)不应该就够了吗？

谢谢

Answer 1

这个问题的答案实际上与 JS 和 DOM api 的关系比 Typescript 更相关。

简而言之，您真正想要的是 event.currentTarget，因为它将是您附加监听器的实际元素。

event.target 可以是您元素的任何子元素。因为它可以是任何元素 - 它不能被安全地键入，所以它被键入为最低公分母，即 EventTarget。 (但我会说我不确定为什么它是 EventTarget 而不是 Element)

有关详细信息，请参阅此答案:What is the exact difference between currentTarget property and target property in JavaScript