I'm using TypeScript for a Vue.js app and I'm trying to use the drop event to trigger uploading an image like this:
handleDOMEvents: {
drop(view, event) {
const hasFiles = event.dataTransfer
&& event.dataTransfer.files
&& event.dataTransfer.files.length;
if (hasFiles) {
upload(event.dataTransfer.files);
}
}
}
(The full guide I'm follow is: https://gist.github.com/slava-vishnyakov/16076dff1a77ddaca93c4bccd4ec4521)
The code works, but TypeScript is giving a warning on the .dataTransfer lines:
Property 'dataTransfer' does not exist on type 'Event'
The reason is that the event argument of the drop function is expecting an Event object, which doesn't have the dataTransfer property.
However, I would expect that drop() should always expect a DragEvent, but this is set in the external library so I don't have control over it.
How can I correctly handle this in TypeScript? Is is as simple as adding something like if (typeof(event) !== DragEvent)? Or is there a better way to get TypeScript to recognise this as a DragEvent? Is this just a case where it's best to ignore the warning?
I'm trying to understand what the best practice approach to handle this would be.
You have the right idea with if (typeof(event) !== DragEvent), except for the fact that TS types don't exist at runtime, so you can't check for them like that.
The way to do this is to create a custom type guard on the field event.type:
function isDragEvent(e: Event): e is DragEvent {
return e.type === "drag";
}
You can then use it as a condition:
drop(view, event) {
if(isDragEvent(event)){
// TS recognizes that event is a DragEvent and has a dataTransfer member
const hasFiles = event.dataTransfer
&& event.dataTransfer.files
&& event.dataTransfer.files.length;
if (hasFiles) {
upload(event.dataTransfer.files);
}
} else {
throw new Error("the passed event is not a DragEvent")
}
}