MapBox 反应打字稿

Question

我遇到以下错误 <div class="form-group shiny-input-container" style="width:100px;">\n <label class="control-label" id="sel1-label" for="sel1"></label>\n <div>\n <select id="sel1"><option value="x" selected>x</option>\n<option value="y">y</option></select>\n <script type="application/json" data-for="sel1" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>\n </div>\n</div>

No overload matches this call. Overload 1 of 3, '(type: "click", listener: (ev: MapMouseEvent & EventData) => void): Map | undefined', gave the following error.

Argument of type '(ev: mapboxgl.MapMouseEvent & mapboxgl.EventData, id: string) => void' is not assignable to parameter of type '(ev: MapMouseEvent & EventData) => void'.

我是 typescript 的新手，所以我很高兴得到提示和解决方案，我可以了解有关 typescript 的更多信息。谢谢。 这适用于 js，但在 ts 上显示该错误。

类型：Overload 2 of 3, '(type: string, listener: (ev: any) => void): Map | undefined', gave the following error.

使用MapBpx：

export type MarkerWithId = mapboxgl.Marker & { id: string }; 

    const addMarker = useCallback((ev: mapboxgl.MapMouseEvent & mapboxgl.EventData, id: string) => {
    const { lng, lat } = ev.lngLat || ev;

    const marker = new mapboxgl.Marker() as MarkerWithId;

    marker.id = id ?? uuidV4();

    marker.setLngLat([lng, lat]).addTo(maps.current!).setDraggable(true);
    
    markers.current[marker.id] = marker;

    if (!id) {
      newMarker.current.next({
        id: marker.id,
        lng,
        lat,
      });
    }

    marker.on('drag', ({ target }: any) => {
      const { id } = target;
      const { lng, lat } = target.getLngLat();

      markerMovement.current.next({
        id,
        lng,
        lat,
      });
    });
  }, []);

地图页面：

useEffect(() => {
  maps.current?.on('click', addMarker); // here is the error
}, [addMarker]);