I'm learning typescript translating an old project from JS to TS. I'm having problems with this function that is called when a submit button is pressed in a login form with the default behaviour prevented. When called, the event is passed as parameter.
In the body of the function I'm trying to parse the content of the <form> into an URLSearchParam object.
function sendLogin(e: SubmitEvent) {
let URLSP: URLSearchParams;
if (e.target instanceof HTMLFormElement) {
URLSP = new URLSearchParams(new FormData(e.target));
...
This approach (the one of the original JS app) is clean but doesn't work because TS complains about: URLsearchParams doesn't accept FormData datatype as argument.
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);
}
...
This second approach also doesn't work because B has [String,FormDataEntryValue][] datatype. URLSearchParams accepted datatypes are string | URLSearchParams | string[][] | Record<string, string>.
Which would be the cleanest way to parse my <form> into an URLSearchParam object in TS?
FormData is actually not full compatible with URLSearchParams contructor, sadly. See Typescript #30584 for more info.
That issue thread has a few workarounds, such as:
const convertedFormEntries = Array.from(
formData,
([key, value]) => (
[key, typeof value === 'string' ? value : value.name]
),
);
Which seems to work, as far as I can tell.