Recommended way of parsing a Form into an URLSearchParam object in Typescript

Issue

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?

Solution

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.

Playground

Answered By - Alex Wayne