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

Question

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?

Alex Wayne · Accepted Answer · 2022-02-07 20:39:05Z

1

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 Feb 7, 2022 at 20:39

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Héctor Over a year ago

Works in my project too, thanks. It's a shame that both types aren't compatible. There are plans to make them compatible in the future?

Alex Wayne Over a year ago

Not according to github.com/microsoft/TypeScript/issues/…, no

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related