React DnD/TypeScript中如何正确使用getDropResult获取放置结果

出现该TS编译错误的原因是react-dnd默认将放置结果的类型设为unknown，之前泛型传参的位置和数量不正确，按以下方式处理即可：

• 提前定义拖拽项、放置返回结果的TS类型
• 给useDrag hook传入对应泛型，第二个泛型位就是放置结果的类型，TS会自动推导所有回调内的参数类型，无需手动给monitor单独标注类型
• 访问放置结果前必须加空值判断：如果拖拽项被拖到放置目标外松开，monitor.getDropResult()会返回null，直接访问属性会触发运行时错误

正确代码示例 #

import { useDrag } from 'react-dnd'

// 拖拽项自身的数据类型，按业务需求定义字段
type DragItem = {
  id: string
}

// 放置目标drop()方法返回的结果类型
type DropResult = {
  name: string
  dropEffect?: string
}

const DraggableItem = () => {
  // useDrag泛型顺序：<拖拽项类型, 放置结果类型, 收集器返回props类型>
  const [{ isDragging }, drag] = useDrag<DragItem, DropResult>(() => ({
    type: 'MyDnDItemType',
    item: { id: '当前拖拽项的唯一ID' },
    end: (item, monitor) => {
      const dropResult = monitor.getDropResult()
      if (dropResult) {
        // 此处TS可正确推导类型，直接访问name不会报unknown错误
        console.log('放置目标名称:', dropResult.name)
      }
    }
  }))

  return (
    <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1 }}>
      可拖拽内容
    </div>
  )
}

补充说明 #

如果需要手动给monitor参数标注类型，必须给DragSourceMonitor传入两个泛型参数，第二个位置传入放置结果类型才会生效，示例如下（该写法冗余度高，不推荐）：

import { useDrag, DragSourceMonitor } from 'react-dnd'

// 类型定义同上
const DraggableItem = () => {
  const [{ isDragging }, drag] = useDrag({
    type: 'MyDnDItemType',
    item: { id: '当前拖拽项的唯一ID' },
    end: (item, monitor: DragSourceMonitor<DragItem, DropResult>) => {
      const dropResult = monitor.getDropResult()
      if (dropResult) {
        console.log('放置目标名称:', dropResult.name)
      }
    }
  })

  // ...组件其余逻辑
}

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