Catch the end of drawing in OL6

Question

I have this code which is complaining after upgrading to OL6.6.1

 draw.on('drawend', (e: olDrawEvent) => {
  const format: olGeoJson = new olGeoJson();
  this.shapeString = format.writeGeometry(e.feature.getGeometry(),
    { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857', rightHanded: false });
  this.featureGeometry = e.feature.getGeometry().getCoordinates();
  if (!this.cancelClick) {
    this.savePolygon(this.featureGeometry[0]);
  }
});

I'm getting an error on 'drawend' which says...

No overload matches this call. The last overload gave the following error. Argument of type 'string' is not assignable to parameter of type '("error" | "change" | "propertychange" | "change:active" | "drawstart" | "drawend" | "drawabort")[]'.ts(2769)

...and an error on e.feature which says

Property 'feature' does not exist on type 'Draw'

For drawend I see that it is still available, I have no idea what's breaking, why, and how to fix it. For e.feature olDrawEvent seems like the wrong object to use but so does olDraw?? I don't understand what OpenLayers wants me to do here and there are no examples to show similar functionality that I can find?

Any help is greatly appreciated!!

Answer 1

If you are importing your Draw and DrawEvent like I was...

import olDraw from 'ol/interaction/Draw.js';
import olDrawEvent from 'ol/interaction/Draw';

change your import to...

import  Draw, { DrawEvent }  from 'ol/interaction/Draw'; 

and change all objects to the new instances.