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

【问题标题】：Typescript and React: What is the proper type for an event handler that uses destructuring?Typescript 和 React：使用解构的事件处理程序的正确类型是什么？
【发布时间】：2021-07-12 14:02:38
【问题描述】：

在使用带有 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} 属性上时，会显示这个令人沮丧的神秘错误：

类型 '({ target }: { target: Element; }) => void' 不可分配给类型 'MouseEventHandler'。参数 '__0' 和 'event' 的类型不兼容。类型 'MouseEvent' 不可分配给类型 '{ target: Element; }'。属性“目标”的类型不兼容。 “EventTarget”类型缺少“Element”类型的以下属性：属性、classList、className、clientHeight 和 120 more.ts(2322) index.d.ts(1457, 9)：预期类型来自属性“onClick”，该属性在此处声明为类型“DetailedHTMLProps”

有没有人可以解决这个问题？我被难住了。

提前谢谢你。

【问题讨论】：

标签： reactjs typescript event-handling destructuring

【解决方案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

【讨论】：

太棒了。奇迹般有效。感谢有关“目标”与“当前目标”的指针！