组合式 API_为事件处理函数标注类型

在处理原生 DOM 事件时，应该为我们传递给事件处理函数的参数正确地标注类型

xxxxxxxxxx
<template>
  <button @click="clickHandler">按钮</button>
</template>
<script setup lang="ts">

// `event` 隐式地标注为 `any` 类型
const clickHandler = (event) =>{
  console.log(event)
}

</script>

没有类型标注时，这个 event 参数会隐式地标注为 any 类型。这也会在 tsconfig.json 中配置了 "strict": true 或 "noImplicitAny": true 时报出一个 TS 错误。因此，建议显式地为事件处理函数的参数标注类型

xxxxxxxxxx
<template>
  <button @click="clickHandler">按钮</button>
</template>
<script setup lang="ts">

// `event` 隐式地标注为 `any` 类型
const clickHandler = (event:Event) =>{
  console.log(event)
}

</script>

此外，你可能需要显式地强制转换 event 上的属性

xxxxxxxxxx
<template>
  <input type="text" @input="inputHandler">
</template>
<script setup lang="ts">

const inputHandler = (event:Event) =>{
  console.log((event.target as HTMLInputElement).value)
}

</script>

事件传递参数

xxxxxxxxxx
<template>
  <button @click="clickHandler('message',$event)">按钮</button>
</template>
<script setup lang="ts">
    
const clickHandler = (data:String,event:Event) =>{
  console.log(data,event)
}

</script>