konva
konva copied to clipboard
TypeScript definitions claims you can't pass custom event properties
I'm generating a custom drag-drop event:
e.target.fire("piecedrop", { dropTarget: shape, evt: e.evt }, true);
Then I'm hooking it up to one of my class methods:
stage.on("piecedrop", this.#handlePieceDrop);
In Javascript, this handler method can happily receive the event object, and dropTarget
is on the received event (I'm using target
for the piece being dragged so I need to pass this custom extra information). This is good. I want to be able to pass this extra info.
#handlePieceDrop = (e: KonvaEventObject<any>) => {
if (e.dropTarget) { ... }
};
However, the TypeScript type for the handler method, defined in Node.d.ts
, is (e: KonvaEventObject<any>) => { ... }
. Because the KonvaEventObject<EventType>
interface doesn't define an index signature, TypeScript thinks it's a problem for me to try to access properties on that event object not explicitly defined, and so that code gives me an error:
Konva's TypeScript definitions should be updated to reflect the fact that KonvaEventObject<any>
can have any custom property set on it.
You could use e.evt
to contain your custom info, but I think this would be a bad idea as it seems to be intended for the associated DOM event. All the native event handler definitions make it a DOM event, and the example drag-drop custom event code just passes it through, keeping it as a DOM event:
previousShape.fire(
'dragleave',
{
evt: evt.evt,
},
true
);
So it would be surprising if it suddenly because some other custom object.