[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、Zod基础
前端·javascript·人工智能·语言模型·自然语言处理·typescript
不好听61317 分钟前
Bun vs Node.js:谁才是 TypeScript 的"亲爹"?
typescript·node.js·bun
触底反弹23 分钟前
从 Bun 到 DeepSeek:用 TypeScript 构建你的第一个 AI Agent
人工智能·http·typescript
拾年27538 分钟前
Bun:重新定义 JavaScript 运行时 - 为什么它可能是 Node.js 的终结者?
javascript·typescript·bun
vim怎么退出39 分钟前
Dive into React——调度/并发
前端·react.js·源码阅读
假如让我当三天老蒯41 分钟前
React的children属性(自学用)
前端·react.js
mONESY41 分钟前
Bun+TS零配置极速实现大模型API请求
typescript·bun
JD技术委员会1 小时前
TypeScript 在 MCP Server 开发中为什么受关注
linux·服务器·typescript
ldmd2841 小时前
Typescript 入门篇-3
javascript·typescript·notepad++
markfeng817 小时前
React入门教学
前端·react.js