Estoy usando TypeScript para una aplicación Vue.js y estoy tratando de usar el evento de soltar para activar la carga de una imagen como esta:
handleDOMEvents: { drop(view, event) { const hasFiles = event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length; if (hasFiles) { upload(event.dataTransfer.files); } } }(La guía completa que sigo es: https://gist.github.com/slava-vishnyakov/16076dff1a77ddaca93c4bccd4ec4521 )
El código funciona, pero TypeScript muestra una advertencia en las líneas .dataTransfer :
La propiedad 'dataTransfer' no existe en el tipo 'Evento'
El motivo es que el argumento de event de la función de drop espera un objeto de Event , que no tiene la propiedad dataTransfer .
Sin embargo, espero que drop() siempre espere un DragEvent , pero esto está configurado en la biblioteca externa, por lo que no tengo control sobre él.
¿Cómo puedo manejar esto correctamente en TypeScript? ¿Es tan simple como agregar algo como if (typeof(event) !== DragEvent) ? ¿O hay una mejor manera de hacer que TypeScript reconozca esto como DragEvent ? ¿Es este solo un caso en el que es mejor ignorar la advertencia?
Estoy tratando de entender cuál sería el enfoque de mejores prácticas para manejar esto.
Tiene la idea correcta con if (typeof(event) !== DragEvent) , excepto por el hecho de que los tipos de TS no existen en el tiempo de ejecución, por lo que no puede verificarlos de esa manera.
La forma de hacer esto es crear un protector de tipo personalizado en el campo event.type :
function isDragEvent(e: Event): e is DragEvent { return e.type === "drag"; }A continuación, puede usarlo como una condición:
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") } }