vue ts click中的事件类型怎么写？

最新推荐文章于 2024-06-03 17:18:43 发布

qq_13854514

最新推荐文章于 2024-06-03 17:18:43 发布

阅读量678

点赞数 7

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/server01/article/details/135264591

版权

本文介绍了在Vue中为事件处理器参数添加类型的重要性，以解决TypeScript在处理DOM事件时遇到的类型错误。通过将事件目标转换为HTMLInputElement类型，可以避免TypeScript的类型检查异常。

摘要由CSDN通过智能技术生成

为事件处理器添加类型
在处理原生 DOM 事件的时候，正确地为处理函数的参数添加类型或许会是有用的。让我们看这个例子：

<template>
<input type="text" @change="handleChange" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
// `evt` 将会是 `any` 类型
const handleChange = evt => {
console.log(evt.target.value) // 此处 TS 将抛出异常
}
return { handleChange }
}
})
</script>

如你所见，在没有为 evt 参数正确地声明类型的情况下，当我们尝试获取 <input> 元素的值时，TypeScript 将抛出异常。解决方案是将事件的目标转换为正确的类型：

const handleChange = (evt: Event) => {
console.log((evt.target as HTMLInputElement).value)
}
官网文档连接：为事件处理器添加类型
————————————————
版权声明：本文为CSDN博主「一个网络搬砖的斜杠青年」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45687922/article/details/123426215