Estoy tratando de averiguar qué tipo de mecanografiado se usa un evento de cambio en un proyecto Angular.
El código es algo simple como esto:
cargar-archivo.componente.html
<input type="file" (change)="onChange($event)"/>subir archivos.ts
public onChange(event: Event): void { if (event.target.files && event.target.files.length) { const [file] = event.target.files; console.log(file); } } Escribir el evento como Event me da el siguiente error de pelusa de TypeScript:
Property 'files' does not exist on type 'EventTarget' ¿Qué debo escribir esto si no es un Event ?
los archivos deben ser accesibles a través de la propiedad event.srcElement.files .
es un evento Pero vas a tener que convertir la const que estás usando como HTMLInputElement.
public onChange(event: Event): void { if ((event.target as HTMLInputElement).files && (event.target as HTMLInputElement).files.length) { const [file] = event.target.files; } }La única otra forma será suprimir el error con tsignore. En react, flow, tienen un tipo SyntheticEvent que puede escribir en este caso particular para evitarlo, pero angular no tiene un equivalente real.
public onChange(event: Event): void { const input = event.target as HTMLInputElement; if (!input.files?.length) { return; } const file = input.files[0]; console.log(file); }Solo tienes que escribir esto antes de hacer nada con tu evento:
if (!(event.target instanceof HTMLInputElement)) return; Typescript sabrá entonces que su event.target es una instancia de HTMLInputElement y dejará de gritarle.
Puede especificar el target de propiedad de Event para que sea un HTMLInputElement utilizando un tipo de intersección como sugerencia de tipo de event .
public onChange(event: Event & { target: HTMLInputElement }): void { if (event.target.files && event.target.files.length) { const [file] = event.target.files; console.log(file); } }Un tipo de intersección combina múltiples tipos en uno. Esto le permite agregar tipos existentes para obtener un solo tipo que tenga todas las funciones que necesita.
https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#intersection-types
La respuesta aceptada arroja dos errores en mi compilador: (event.target as HTMLInputElement).files is possibly 'null' y Type 'FileList' must have a '[Symbol.iterator]()' method that returns an iterator .
Esto funciona para mí:
const target = event.target as HTMLInputElement; if (target.files && target.files.length) { const file = target.files[0]; }