TypeScript TS2339：类型“EventTarget”上不存在属性“closest” – 如何在React中获取原生event.target

在本文中，我们将介绍在React中如何获取原生event.target，并解决TypeScript报错TS2339：“Property ‘closest’ does not exist on type ‘EventTarget’”。

什么是TS2339错误？

TS2339错误是TypeScript对于类型检查进行报错的一种机制。在React中，经常会遇到类型“EventTarget”上不存在属性“closest”的错误，这是因为EventTarget是一个原生的DOM接口，而closest是在DOM中Element接口上的方法。所以在React中，当我们获取event.target时，它的类型被推断为EventTarget，而不是Element类型。因此，在尝试使用closest方法时，TypeScript会报错显示该方法不存在。

如何获取原生event.target？

要解决这个问题，我们需要做两个步骤：

首先，我们需要断言event.target的类型为Element。这样，TypeScript就能够识别到closest方法的存在。我们可以使用类型断言as来实现这一点：

function handleClick(event: React.MouseEvent) {
  const target = event.target as Element;
  target.closest('selector');
}

在上面的例子中，我们断言event.target的类型为Element，并使用target.closest方法获取最近的匹配元素。通过断言类型，我们告诉TypeScript在这个上下文中应该将event.target视为一个Element类型，从而避免了TS2339错误。

第二步是在项目中引入Element的声明文件。在TypeScript中，我们可以通过声明文件扩展库的类型定义。对于DOM接口的类型定义，我们可以通过安装@types/dom-events包并引入它的声明文件，如下所示：

import { MouseEvent } from 'react';
import { Element } from '@@types/dom-events';

function handleClick(event: MouseEvent) {
  const target = event.target as Element;
  target.closest('selector');
}

通过引入Element的声明文件，我们告诉TypeScript在React中的MouseEvent类型中，event.target的类型应该被识别为Element，从而消除了TS2339错误。

示例说明

假设我们在React中有一个按钮组件，当点击按钮时，我们想获取最近的包含特定类名的父元素。

import { MouseEvent } from 'react';
import { Element } from '@@types/dom-events';

const Button = () => {
  const handleClick = (event: MouseEvent) => {
    const target = event.target as Element;
    const parentElement = target.closest('.container');
    console.log(parentElement);
  };

  return <button onClick={handleClick}>Click me</button>;
};

在上面的示例中，我们定义了一个Button组件，并在onClick事件处理程序中使用了上面解释的方法来获取最近的包含类名为.container的父元素。然后，我们将父元素打印到控制台上。通过这个示例，我们可以清楚地看到如何在React中优雅地获取原生event.target，并进行进一步的操作。

总结

在本文中，我们详细介绍了在React中获取原生event.target，并解决了TypeScript报错TS2339：“Property ‘closest’ does not exist on type ‘EventTarget’”。通过断言类型和引入Element的声明文件，我们可以成功获取event.target，并使用其原生的方法，如closest。这种方法使我们能够更好地操作DOM，同时保持TypeScript的类型安全性。希望本文能够对你在React中处理event.target的问题有所帮助。