Typescript 和 React：使用解构的事件处理程序的正确类型是什么？

Question

在 React 中使用事件处理程序时，我遇到了 Typescript 的严格性问题。具体来说，我无法将对象解构与 onClick={handleClick} 属性上的 handleClick() 函数一起使用。

这是不干净的版本，它是唯一一个没有抱怨的打字稿：

const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    const target: Element = event.target as Element
    // ...other code goes here
}

这是干净的版本，打字稿会抛出错误：

const handleClick = ({ target }: { target: Element }) => {
    // ...other code goes here
}

第二个代码块（不干净的版本）导致 Typescript 抛出错误。当我将鼠标悬停在 onClick={handleClick} 属性上时，会显示这个令人沮丧的神秘错误：

Type '({ target }: { target: Element; }) => void' is not assignable to type 'MouseEventHandler'. Types of parameters '__0' and 'event' are incompatible. Type 'MouseEvent<HTMLButtonElement, MouseEvent>' is not assignable to type '{ target: Element; }'. Types of property 'target' are incompatible. Type 'EventTarget' is missing the following properties from type 'Element': attributes, classList, className, clientHeight, and 120 more.ts(2322) index.d.ts(1457, 9): The expected type comes from property 'onClick' which is declared here on type 'DetailedHTMLProps<ButtonHTMLAttributes, HTMLButtonElement>'

有人对此有解决方案吗？我被难住了。

提前致谢。

Answer 1

您可以只对解构参数使用相同类型 React.MouseEvent<HTMLButtonElement>。这将为 target 推断出正确的类型。不过，您可能希望使用 currentTarget，这是处理程序附加到的元素，而不是 target，这是事件发生的元素。对于按钮，它们是相同的，但 TypeScript 只能推断 currentTarget.

的实际元素类型

import * as React from "react";

const handleClick = ({ target, currentTarget }: React.MouseEvent<HTMLButtonElement>) => {
    // target: EventTarget
    // currentTarget: EventTarget & HTMLButtonElement

    // ...other code goes here
}

const elt = <button onClick={handleClick} />

Playground Link

Typescript 和 React：使用解构的事件处理程序的正确类型是什么？

Typescript and React: What is the proper type for an event handler that uses destructuring?

event-handling

destructuring

typescript

reactjs