不能将类型“($event: any) =＞ void”分配给类型“MouseEvent”

最新推荐文章于 2024-01-19 17:30:32 发布
原创 最新推荐文章于 2024-01-19 17:30:32 发布 · 6.6k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

安装特定版本的@types/node后出现@click错误提示，但不影响实际使用。通过卸载并安装18.7.18版本解决该问题。

 安装@types/node 18.8.4版本之后,在页面上使用@click会有错误提示,但是不影响使用,

删掉@types/node

npm uninstall @types/node

然后安装18.7.18版本的就可以了

npm install @types/node@18.7.18 -D

具体原因不知道是啥,希望看到的大佬帮忙解释下

不能将类型“() =＞ void”分配给类型“MouseEvent”。
weixin_47278755的博客
10-14 6314
相当于将函数绑定成一个变量或者常量。等会出现报错，不影响使用，但看着难受。vite + ts最新。
vue3 @click报错 不能将类型“($event: any) =＞ void”分配给类型“MouseEvent”
qq_41697998的博客
10-13 3020
vue3 @click报错 不能将类型“($event: any) =＞ void”分配给类型“MouseEvent”
不能将类型“Function”分配给类型“(payload: MouseEvent) => void”。 类型“Function”提供的内容与签名“(payload: MouseEvent): v...
weixin_42607969的博客
02-13 1226
这是因为你试图将一个类型为 "Function" 的值分配给一个类型为 "(payload: MouseEvent) => void" 的变量。但是类型 "Function" 的签名与 "(payload: MouseEvent) => void" 不匹配，因此无法进行赋值。 ...
解决：不能将类型“(a?: number) =＞ void”分配给类型“(payload: MouseEvent) =＞ void”
Daqiang0907的博客
06-18 2777
解决：不能将类型“(a?: number) => void”分配给类型“(payload: MouseEvent) => void”
Type ‘void‘ is not assignable to type ‘MouseEventHandler＜HTMLButtonElement＞ | undefined‘.ts(2322) in
m0_57236802的博客
01-19 1190
这个 TypeScript 错误信息 “Type ‘void’ is not assignable to type ‘MouseEventHandler | undefined’” 通常发生在你将一个函数分配给了一个事件处理器（如onClick），但这个函数没有返回正确的类型。在 React 中，事件处理函数（如onClick）期望的是一个函数类型，而不是该函数的返回值。
不能将类型“void[]”分配给类型“ReactNode”。
weixin_46600931的博客
02-03 2573
不能将类型“void[]”分配给类型“ReactNode”。
不能将类型“($event: any) => void”分配给类型“MouseEvent”。
06-09
这个问题通常是因为在给一个事件绑定函数时，函数的参数类型与事件类型不匹配所导致的。 解决这个问题的方法是： 1.确认事件类型是否正确，例如 MouseEvent、KeyboardEvent 等等。 2.确认事件处理函数的参数类型...
vue3 + ts报错不能将类型“($event: any) => void”分配给类型“MouseEvent”。
06-09
需要注意的是，在 Vue 3.x 中，事件绑定语法变成了动态绑定，因此不能直接在模板中写函数调用。如果想要调用一个函数，需要在函数名后面加上括号来调用。 例如，下面的代码是错误的： ```vue <template> ...
Type '{ areaId: string | undefined; initialNodes: Node<any, string | undefined>[]; initialEdges: Edge<any>[]; editable: false; proNodeClick: (event: MouseEvent<Element, MouseEvent>, node: Node<...>) => void; }' is not assignable to type 'IntrinsicAttributes & FlowChartEditorProps & { children?: ReactNode; }'.   Property 'proNodeClick' does not exist on type 'IntrinsicAttributes & FlowChartEditorProps & { children?: ReactNode; }'. Did you mean 'onNodeClick'?
08-05
proNodeClick: (event: MouseEvent, MouseEvent>, node: Node<...>) => void; }' is not assignable to type 'IntrinsicAttributes & FlowChartEditorProps & { children?: ReactNode; }'. Property 'proNodeClick...
// useHandleEvent.js import { ref, onMounted, onUnmounted } from "vue" interface EventType { type: "click" | "dblclick" | "longclick" cell: { row: number; col: number; element: any } originalEvent: MouseEvent | TouchEvent | any } export function useHandleEvent(containerRef: Ref<HTMLElement>, callback: (cb: EventType) => void) { const touchInfo = ref<{ startX: number startY: number startTime: number target: any } | null>(null) const isMobile = ref(false) const lastClickInfo = ref({ time: 0, target: null as any }) const longPressTimer = ref<NodeJS.Timeout | null>(null) const isLongPress = ref(false) const detectMobile = () => { return ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) ) } // 获取事件单元格信息 const getCellFromEvent = (event: any) => { if (!event) return null let target = event.target while (target && target !== containerRef.value) { if (target.dataset?.row !== undefined && target.dataset?.col !== undefined) { return { row: parseInt(target.dataset.row), col: parseInt(target.dataset.col), element: target } } target = target.parentNode } return null } // 触发回调的统一方法 const triggerCallback = (type: "click" | "dblclick" | "longclick", cell: any, event: any) => { const resData = { type, cell, originalEvent: event } return callback(resData) } // 处理鼠标按下事件 const handleMouseDown = (event: MouseEvent) => { // 阻止右键菜单 if (event.button === 2 || event.button === 3) { event.preventDefault() return } const cell = getCellFromEvent(event) if (!cell) return // 设置长按定时器 longPressTimer.value = setTimeout(() => { isLongPress.value = true triggerCallback("longclick", cell, event) }, 500) } // 处理鼠标抬起事件 const handleMouseUp = (event: MouseEvent) => { if (longPressTimer.value) { clearTimeout(longPressTimer.value) longPressTimer.value = null } if (isLongPress.value) { isLongPress.value = false return } const cell = getCellFromEvent(event) if (!cell) return const now = Date.now() if (lastClickInfo.value.target === cell && now - lastClickInfo.value.time < 300) { triggerCallback("dblclick", cell, event) lastClickInfo.value = { time: 0, target: null } } else { triggerCallback("click", cell, event) lastClickInfo.value = { time: now, target: cell } } } // 处理触摸开始事件 const handleTouchStart = (event: TouchEvent) => { if (event.touches.length > 1) return const touch = event.touches[0] const cell = getCellFromEvent(event) if (!cell) return touchInfo.value = { startX: touch.clientX, startY: touch.clientY, startTime: Date.now(), target: cell } longPressTimer.value = setTimeout(() => { event.preventDefault() isLongPress.value = true triggerCallback("longclick", cell, event) }, 500) } // 处理触摸结束事件 const handleTouchEnd = (event: TouchEvent) => { if (longPressTimer.value) { clearTimeout(longPressTimer.value) longPressTimer.value = null } if (!touchInfo.value) return if (isLongPress.value) { isLongPress.value = false touchInfo.value = null return } const touch = event.changedTouches[0] const cell = getCellFromEvent(touch) if (!cell || cell !== touchInfo.value.target) { touchInfo.value = null return } const moveDistance = Math.sqrt( Math.pow(touch.clientX - touchInfo.value.startX, 2) + Math.pow(touch.clientY - touchInfo.value.startY, 2) ) if (moveDistance < 10) { const now = Date.now() if (lastClickInfo.value.target === cell && now - lastClickInfo.value.time < 300) { triggerCallback("dblclick", cell, event) lastClickInfo.value = { time: 0, target: null } } else { triggerCallback("click", cell, event) lastClickInfo.value = { time: now, target: cell } } } touchInfo.value = null } // 阻止默认的右键菜单行为 const handleContextMenu = (event: MouseEvent) => { event.preventDefault() } // 鼠标移出时清除长按状态 const handleMouseLeave = () => { if (longPressTimer.value) { clearTimeout(longPressTimer.value) longPressTimer.value = null } isLongPress.value = false } onMounted(() => { if (!containerRef.value) return isMobile.value = detectMobile() containerRef.value.addEventListener("mousedown", handleMouseDown) containerRef.value.addEventListener("mouseup", handleMouseUp) containerRef.value.addEventListener("mouseleave", handleMouseLeave) containerRef.value.addEventListener("contextmenu", handleContextMenu) containerRef.value.addEventListener("touchstart", handleTouchStart, { passive: true }) containerRef.value.addEventListener("touchend", handleTouchEnd, { passive: true }) }) onUnmounted(() => { if (!containerRef.value) return containerRef.value.removeEventListener("mousedown", handleMouseDown) containerRef.value.removeEventListener("mouseup", handleMouseUp) containerRef.value.removeEventListener("mouseleave", handleMouseLeave) containerRef.value.removeEventListener("contextmenu", handleContextMenu) containerRef.value.removeEventListener("touchstart", handleTouchStart) containerRef.value.removeEventListener("touchend", handleTouchEnd) if (longPressTimer.value) clearTimeout(longPressTimer.value) }) return { isMobile } } 请根据这段代码进行优化，在PC端和移动端统一都只返回按下down，弹起up，单击click，双击dblclick和长按longclick 5种事件，其他的都阻止屏蔽，请确保能准确区分识别单击，双击和长按事件
最新发布
08-06
export function useHandleEvent(containerRef: Ref<HTMLElement>, callback: (cb: EventData) => void) { const touchInfo = ref startX: number startY: number startTime: number target: any } | null>...
Vue3项目使用Ts：不能将类型“(XXX?: boolean) =＞ void”分配给类型“(payload: MouseEvent) =＞ void”
努力的nana
09-15 1619
【代码】Vue3项目使用Ts：不能将类型“(XXX?: boolean) =＞ void”分配给类型“(payload: MouseEvent) =＞ void”
不能将类型“Ref.......“分配给类型“(...args: any) =＞ void”。
H_jrqn的博客
07-24 5404
不能将类型“Ref.......“分配给类型“(...args: any) => void”。
异常报错汇总2--java.lang.Exception: Method basicSelect() should be void
shawnyang2019的博客
09-27 8057
java.lang.Exception: Method basicSelect() should be void at org.junit.runners.model.FrameworkMethod.validatePublicVoid(FrameworkMethod.java:99) at org.junit.runners.model.FrameworkMethod.validatePu...
前端面试题每日3题——2022-08-31
qq_38650754的博客
08-31 751
每日 3 题 1 以下代码执行后，控制台中的输出内容为？ var foo = function bar() { return 123; }; console.log(typeof foo); console.log(typeof foo()); console.log(typeof bar()); 2 以下代码执行后，控制台中的输出内容为？ var obj = { a: 1, foo: function () { return this.a; }, }; var fun = obj
ts 子组件中 定义的方法报错
fred8的博客
10-12 3925
报错事例 typtscript 组件中定义方法报错 不能将类型“{ onRef: (ref: any) => void; }”分配给类型“IntrinsicAttributes & IntrinsicClassAttributes<Component<Omit<IProps, “form”>, any, any>> & Readonly<…> & Readonly<…>”。 类型“IntrinsicAttributes
ts(typescript): 报错
qq_36413371的博客
12-12 3367
参数“item”隐式具有“any”类型 fetchJSErrorDetail(tabelParams).then((data: any) => { console.log('快应用异常数据列表.data', data) setTableData(data.data.map((item: any) => { return item.crash_rate = (item.crash_uv / item.start_cnt) })) // crash_rate .
不能将 "void *" 类型的值分配到 "PBYTE" 类型的实体 错误解决方法
lixingyun123的博客
05-10 4842
把项目—属性—常规—字符集把使用 Unicode 字符集改为使用多字节字符集
不能将 "void *" 类型的值分配到 "task_struct *" 类型的实体
weixin_45746055的博客
05-07 4444
不能将 “void *” 类型的值分配到 “task_struct *” 类型的实体 unrunnableTask = malloc(sizeof(struct task_struct)); 添加(struct task_struct*) 即可 unrunnableTask = (struct task_struct*)malloc(sizeof(struct task_struct)); ...
不能将类型“{ Change: (e: any) =＞ void； }
qq_45641978的博客
11-25 1481
ts 子组件调用父组件发生报错 报错如图 原因 子组件传入的props参数类型不一致 //原代码 export default class Ceshi extends Component{} 修改方法 //给props定义参数类型 export default class Ceshi extends Component <any>{} ...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值