Draw / DrawAction event typing issue on 5.x

EirikH

When upgrading from 4.34.x to 5.0.5/5.0.6, typescript complains about the types for the on event listeners for DrawAction.

To recreate, just setup this example from the docs in a typescript project.

function enableCreatePolygon(draw, view) {
  let action = draw.create("polygon");

  // PolygonDrawAction.vertex-add
  // Fires when user clicks, or presses the "F" key.
  // Can also be triggered when the "R" key is pressed to redo.
  action.on("vertex-add", function (evt) { // <- ERROR:  Argument of type '"vertex-add"' is not assignable to parameter of type 'never'.ts
    createPolygonGraphic(evt.vertices);
  });

  // PolygonDrawAction.vertex-remove
  // Fires when the "Z" key is pressed to undo the last added vertex
  action.on("vertex-remove", function (evt) {  // <- ERROR:  Argument of type '"vertex-remove"' is not assignable to parameter of type 'never'.ts
    createPolygonGraphic(evt.vertices);
  });

  // Add a graphic representing the completed polygon
  // when user double-clicks on the view or presses the "Enter" key
  action.on("draw-complete", function (evt) {  // <- ERROR: Argument of type '"vertex-add"' is not assignable to parameter of type 'never'.ts
    createPolygonGraphic(evt.vertices);
  });
}

function createPolygonGraphic(vertices){
  view.graphics.removeAll();
  let polygon = {
    type: "polygon", // autocasts as Polygon
    rings: vertices,
    spatialReference: view.spatialReference
  };

  let graphic = new Graphic({
    geometry: polygon,
    symbol: {
      type: "simple-fill", // autocasts as SimpleFillSymbol
      color: "purple",
      style: "solid",
      outline: {  // autocasts as SimpleLineSymbol
        color: "white",
        width: 1
      }
    }
  });
  view.graphics.add(graphic);
}

 

There is a post on something similar, but our lib is already ES2024.

https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/typescript-event-inference-no-longer-working/m-p/1686849#M88198 

Our version of Typescript is latest 5.9.3.

Other "on" events we have in the project (e.g. mapView.on) work as expected.

If you "cast" to a specific DrawAction, it picks the eventTypes up correctly:

const action = draw.create(mode, { mode: 'freehand' }) as SegmentDrawAction;
action.on('draw-complete', drawCompletedHandler); // all fine now

 

EirikH

Thanks, hope you figure out a way 🤞