Vue.Draggable中change事件的TypeScript类型是什么？

• 优先检查依赖库的类型定义
  Vue.Draggable底层基于SortableJS实现，它的change事件其实复用了SortableJS的事件类型。你可以直接从sortablejs的类型包中导入对应的类型：

import type { ChangeEvent } from 'sortablejs'

之后在事件回调里直接使用这个类型即可，比如：

<Draggable @change="handleChange" />

<script setup lang="ts">
const handleChange = (event: ChangeEvent) => {
  // 处理事件逻辑
}
</script>

• 手动声明事件类型
  如果导入的类型和实际事件负载不匹配，或者你想更贴合业务场景，可以根据官方文档给出的负载结构手动定义类型：

type DraggableChangePayload = {
  added?: {
    newIndex: number
    element: HTMLElement
  }
  removed?: {
    oldIndex: number
    element: HTMLElement
  }
  moved?: {
    oldIndex: number
    newIndex: number
    element: HTMLElement
  }
  // 补充官方文档提到的其他字段
}

然后在回调中使用这个自定义类型。

• 查看组件源码确认结构
  直接去Vue.Draggable的源码里找change事件的触发逻辑，通常在组件的emit调用处能看到传递的参数结构，比如搜索$emit('change'或者emit('change'，就能明确参数的具体字段，再对应编写类型。

• 社区问题排查
  去Vue.Draggable的GitHub仓库Issues里搜索关键词「change event typescript」，很多开发者已经遇到过类似问题，里面会有现成的解决方案或者维护者的官方回复。

内容的提问来源于stack exchange，提问作者Mathieu