Estoy aprendiendo mecanografiado traduciendo un proyecto antiguo de JS a TS. Tengo problemas con esta función que se llama cuando se presiona un botón de envío en un formulario de inicio de sesión con el comportamiento predeterminado impedido. Cuando se llama, el evento se pasa como parámetro.
En el cuerpo de la función, intento analizar el contenido del <form> en un objeto URLSearchParam .
function sendLogin(e: SubmitEvent) { let URLSP: URLSearchParams; if (e.target instanceof HTMLFormElement) { URLSP = new URLSearchParams(new FormData(e.target)); ... Este enfoque (el de la aplicación JS original) está limpio pero no funciona porque TS se queja de: URLsearchParams no acepta el tipo de datos FormData como argumento.
function sendLogin(e: SubmitEvent) { let URLSP: URLSearchParams; if (e.target instanceof HTMLFormElement) { let A = new FormData(e.target); let B = [...A.entries()]; let URLSP = new URLSearchParams(B); } ... Este segundo enfoque tampoco funciona porque B tiene el tipo de datos [String,FormDataEntryValue][] . Los tipos de datos aceptados URLSearchParams son string | URLSearchParams | string[][] | Record<string, string> .
¿Cuál sería la forma más limpia de analizar mi <form> en un objeto URLSearchParam en TS?
FormData en realidad no es totalmente compatible con el constructor URLSearchParams , lamentablemente. Consulte Texto mecanografiado n.° 30584 para obtener más información.
Ese hilo de problema tiene algunas soluciones, como:
const convertedFormEntries = Array.from( formData, ([key, value]) => ( [key, typeof value === 'string' ? value : value.name] ), );Lo que parece funcionar, por lo que puedo decir.