自定义事件抛出 TS2769：没有重载匹配此调用答案

【问题标题】：Custom Event throws TS2769: No overload matches this call自定义事件抛出 TS2769：没有重载匹配此调用
【发布时间】：2022-01-18 08:16:57
【问题描述】：

我正在尝试在 React 中创建一个 TypeScript 组件，并希望添加一个自定义拖动开始事件。我现在有以下代码：

import React, {RefObject, useEffect, useState} from "react";

type Props = {
    id: string,
    effect: DataTransfer["dropEffect"],
    ref: RefObject<HTMLDivElement>,
    onDragStart: any
}

export default function useDrag({id, effect, ref, onDragStart}: Props) {
    const [dragState, updateDragState] = useState<string>("draggable");

    const dragStart = (event: React.DragEvent<HTMLDivElement>): any => {
        updateDragState("dragStart");
        event.dataTransfer.dropEffect = effect;
        event.dataTransfer.setData("source", id);
         onDragStart && onDragStart()
    }

    useEffect(() => {
        const element = ref.current;

        if (element) {
            element.setAttribute("draggable", String(true));
            element.addEventListener("dragstart", dragStart);

            return () => {
                element.removeEventListener("dragstart", dragStart);
            }

        }

    })

}

但我在尝试添加自定义事件时总是收到以下错误：

TS2769：没有与此调用匹配的重载。重载 1 of 2, '(type: "dragstart", listener: (this: HTMLDivElement, ev: DragEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void'，给出以下错误。 '(event: React.DragEvent) => any' 类型的参数不能分配给 '(this: HTMLDivElement, ev: DragEvent) => any' 类型的参数。参数 'event' 和 'ev' 的类型不兼容。 “DragEvent”类型缺少“DragEvent”类型的以下属性：nativeEvent、isDefaultPrevented、isPropagationStopped、persist Overload 2 of 2、“（类型：字符串、侦听器：EventListenerOrEventListenerObject、选项？：布尔 | AddEventListenerOptions | undefined）：void”，给出了以下错误。 '(event: React.DragEvent) => any' 类型的参数不能分配给 'EventListenerOrEventListenerObject' 类型的参数。类型 '(event: React.DragEvent) => any' 不可分配给类型 'EventListener'。参数 'event' 和 'evt' 的类型不兼容。 “Event”类型缺少“DragEvent”类型的以下属性：dataTransfer、altKey、按钮、按钮等 19 个。

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

React 使用 Synthetic Events 进行回调，因此 React.DragEvent 的类型不等于 addEventListener 所期望的类型。此外，您不应该使用 ref 和 useEffect 注册事件回调，您可以使用

实现拖动功能

<div draggable="true" onDragStart={handleDragStart} />

【讨论】：

好的，但我想将它创建为一个 Hook，这样我就可以将它添加到我想要的组件中。
为什么是钩子？为什么不是自定义组件？
我想我也可以创建一个自定义组件。我找到了一篇文章，其中介绍了如何创建自定义 hool。