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

Question

当我在 React 中使用事件处理程序时，我遇到了 Typescript 严格性的问题。具体来说，我无法将对象解构与属性handleClick()上的函数一起使用onClick={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<HTMLButtonElement, MouseEvent>”不可分配给类型“{ target: Element; }'。属性“目标”的类型不兼容。类型“EventTarget”缺少类型“Element”中的以下属性：attributes、classList、className、clientHeight 和 120 more.ts(2322) index.d.ts(1457, 9)：预期类型来自属性“onClick” ' 这是在类型 '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} />

游乐场链接