Reactjs Typescript和React：对于使用分解结构的事件处理程序，什么是合适的类型？

我在使用带有React的事件处理程序时遇到了Typescript的严格性问题。具体地说，我无法对

onClick={handleClick}

属性上的

handleClick（）函数使用对象分解

这是不干净的版本，是唯一一个没有抱怨的typescript acceps：

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

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

类型“（{target}:{target:Element；}）=>void”不可分配给类型“MouseEventHandler”。
参数“\u0”和“事件”的类型不兼容。
类型“MouseEvent”不可分配给类型“{target:Element；}”。
属性“target”的类型不兼容。
类型“EventTarget”缺少类型“Element”中的以下属性：属性、类列表、类名、clientHeight和其他120个.ts（2322）
index.d.ts（1457，9）：预期的类型来自属性“onClick”，该属性在类型“DetailedHTMLProps”上声明

有人能解决这个问题吗？我被难住了

提前谢谢。
您可以使用相同类型的
React.MouseEvent
作为解构参数。这将推断出
目标的正确类型。不过，您可能希望使用处理程序附加到的元素
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} />

import*as React from“React”；
const handleClick=（{target，currentTarget}:React.MouseEvent）=>{
//目标：EventTarget
//currentTarget:EventTarget和HtmlButtoneElement
//…其他代码在这里
}
常数=

太棒了。工作起来很有魅力。感谢您提供关于“目标”与“当前目标”的指针！
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} />