[react]小技巧, ts如何声明点击事件的类型

很简单, 鼠标放到事件上面就行了

如果想知道点击的是什么元素 ,打印他的nodename就行了

不过得断言为html元素才行

javascript 复制代码
  const handleClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    console.log('current', (e.target as HTMLElement).nodeName);
  };

为什么要断言是html元素?

EventTarget 是所有事件目标(包括 DOM 元素、XMLHttpRequestWebSocket 等)的基类。并不是所有继承自 EventTarget 的对象都具备 nodeName 属性,nodeName 这个属性是 HTMLElement 类型特有的。因此,只有在 EventTarget 的具体子类是 HTMLElement 或其更具体的子类时,才会有 nodeName 属性。

(XMLHttpRequest, WebSocket)并没有 nodeName属性, 懂了吗

相关推荐
烛衔溟5 小时前
TypeScript 类的类型 —— 作为类型使用
javascript·ubuntu·typescript
阿隅8 小时前
TS 深度解析:同为 ? 可选语法,为什么赋值一错一对?类类型与this绑定底层拆解
typescript
Patrick_Wilson11 小时前
前端解析接口数据,到底该不该信任后端?聊聊「防御性编程」与「类型契约」的边界
架构·typescript·代码规范
姓蔡小朋友11 小时前
TypeScript数据类型
javascript·ubuntu·typescript
kyriewen13 小时前
14MB VS 15KB:前React核心成员用AI写了个排版库,让Safari快了一千倍
前端·javascript·react.js
qcx2314 小时前
【系统学AI】07 ReAct范式:从奠基之作到Reflexion/RAF的演进
前端·人工智能·react.js
烛衔溟14 小时前
TypeScript 高级类型与工具类型全解
javascript·ubuntu·typescript
米丘15 小时前
React19.x 一个示例来看 Diff 算法
javascript·react.js
喵了几个咪16 小时前
吃透后台权限系统:从架构设计到 Vue3/React 双框架完整落地
前端·vue.js·react.js·权限系统
Aerfajj16 小时前
React18的边学边记
前端·react.js