在 TypeScript 中指定 event.target 的类型

让我们解决使用ClassList和dataset等属性时出现的错误！

案件由来

本文出现的所有错误都是基于 eslint 产生的错误。

我想通过使用在执行鼠标单击操作时默认从函数接收到的事件参数来更改类。但是，与往常一样，TypeScript 永远不会让您舒适地工作。

让我们看下面的例子。

 // 在不使用 TypeScript 的环境中实现的组件 _进口_ 反应 _从_ “反应” _功能_ 零件（） {  
 _常量_ 点击= _事件_ => {  
    _事件_ .target.classList.toggle('on')  
 }  _返回_ (  
 <>  
 <div _班级名称_ ="btn" _点击_ ={onClick}>点击</div>  
 </>  
 )  
 } _出口_ _默认_ 零件

如果你不使用 TypeScript，上面的代码不会产生错误。但是，在 TypeScript 环境中，接收第一个参数的部分会发生错误。发生此错误是因为事件类型是任何。

_进口_ 反应 _从_ “反应” _功能_ 零件（） { // 参数 'event' 隐式具有 'any' 类型  
 _常量_ 点击= _事件_ => {  
    _事件_ .target.classList.toggle('on')  
 } _返回_ (  
 <>  
 <div _班级名称_ ="btn" _点击_ ={onClick}>点击</div>  
 </>  
 )  
 } _出口_ _默认_ 零件

这是一个自然发生的错误，因为没有为参数指定类型。没什么好理解的问题来自

不会消失的错误

为了解决这个错误，让我们设置 MouseEvent 类型如下。参数中出现的错误消失了，但是这一次 event.target 中出现了错误。

_进口_ 反应 _从_ “反应” _功能_ 零件（） {  
 _常量_ 点击=（ _事件：鼠标事件）_ => { // 对象可能是 'null'。  
    _事件_ .target.classList.toggle('on')  
 } _返回_ (  
 <>  
 <div _班级名称_ ="btn" _点击_ ={onClick}>点击</div>  
 </>  
 )  
 } _出口_ _默认_ 零件

问题的原因是event.target的类型是EventTarget |因为它是空的。如果event.target变为null，在使用classList的部分会出现运行时错误，所以提前通知大家阻断变为null的可能。

让我们用最简单（但不推荐）的方法来解决这个问题，即非空断言运算符。 event.target 中出现的错误马上就解决了，但这一次，classList 中出现了错误。此外，这个错误甚至没有意义。在 JavaScript 中使用的 ClassList 不包含在该类型中！

_进口_ 反应 _从_ “反应” _功能_ 零件（） {  
 _常量_ 点击=（ _事件：鼠标事件）_ => { // 属性 'classList' 在类型 'EventTarget' 上不存在。  
    _事件_ .target!.classList.toggle('on')  
 } _返回_ (  
 <>  
 <div _班级名称_ ="btn" _点击_ ={onClick}>点击</div>  
 </>  
 )  
 } _出口_ _默认_ 零件

这可以通过查看名为 EventTarget 的接口是如何定义的来理解的。 EventTarget 没有类列表！

_// ... 最初定义了参数，但是因为代码太长而被省略了。 interface_ _事件目标_ {  
 添加事件监听器（...）： _空白_ ;  
 调度事件（...）： _布尔值_ ;  
 移除事件监听器（...）： _空白_ ;  
 }

解决问题

那么我们该如何解决这个问题呢？

代替 lib.dom.d.ts 默认提供的 MouseEvent，你可以使用 react 提供的 MouseEvent。接下来，如果从onClick接收事件的html标签的类型被断言为event.target，则不会发生错误。

_// 从 react 中导入 MouseEvent 类型。_  
 从“react”导入类型 MouseEvent _  
进口_ 反应 _从_ “反应” _功能_ 零件（） { // 任何 html 标签事件都会在这里传递，HTMLElement.  
 _常量_ 点击=（ _事件：鼠标事件 <HTMLElement>)_ => { // 使用类型断言将 event.target 的类型更改为 HTMLDivElement。  
 const evt = event.target 作为 HTMLDivElement evt.classList.toggle('on')  
 } _返回_ (  
 <>  
 <div _班级名称_ ="btn" _点击_ ={onClick}>点击</div>  
 </>  
 )  
 } _出口_ _默认_ 零件

参考

[

develium : Naver 博客

编辑描述

博客.naver.com

](https://blog.naver.com/psj9102/222212568369)

[

在 TypeScript 中指定事件对象类型

使用 TypeScript 做 React 项目最困难的部分之一是与 DOM 相关的部分。字符串、整数和对象可以用原始类型或接口解决，但 DOM 具有相同的不寻常类型……

快乐代码.tistory.com

](https://merrily-code.tistory.com/157)

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/37458/26411803