allow constructing URLSearchParams directly from FormData

[thatbudakguy]

TypeScript Version: 3.4.0-dev.20190323

Search Terms:
URLSearchParams, FormData

Code

let form = document.createElement('form')
console.log(new URLSearchParams(new FormData(form)))

Expected behavior:
compilation succeeds and an (empty) URLSearchParams instance is constructed using the provided FormData. The above code runs without issue on Chrome 73 and Firefox 67 for me.

Actual behavior:
compilation fails because URLSearchParams doesn't explicitly allow an argument of type FormData as input to the constructor.

Argument of type 'FormData' is not assignable to parameter of type 'string | Record<string, string> | URLSearchParams | string[][]'.
  Property 'sort' is missing in type 'FormData' but required in type 'URLSearchParams'.

Playground Link:
link

Related Issues:
#12517
#15338

[thatbudakguy]

If all that's required for this is to add | FormData to the constructor signature, I'm happy to PR.

[saschanaz]

#19806 covers this.

[leonstafford]

@thatbudakguy - in the meantime, do you have a workaround for this?

[thatbudakguy]

@leonstafford my current workaround is just // @ts-ignore, sadly.

[raythurnevoid]

Another workaround is: new URLSearchParams(new FormData(event.currentTarget) as any)

[JirkaDellOro]

Is there a deadline for this bug to be fixed?

[JirkaDellOro]

No? Yes? When?

[Spongman]

any news?

[PaperStrike]

I don't think it will be "fixed" as FormData may contain File while URLSearchParams only accepts String.

That code runs successfully in browsers by the implicit conversions in JS. Explicit matched types are needed in TS. Try to filter out the Files, or convert them to Strings. For example,

// For files, use their names
const convertedFormEntries = Array.from(
  new FormData(),
  ([key, value]) => (
    [key, typeof value === 'string' ? value : value.name]
  ),
);
const searchParams = new URLSearchParams(convertedFormEntries);

You can see the error more clearly in this TS playground.

[JirkaDellOro]

Well, MDN writes that the constructor accepts one the following:

• A USVString, which will be parsed from application/x-www-form-urlencoded format. A leading '?' character is ignored.
• A literal sequence of name-value string pairs, or any object — such as a FormData object — with an iterator that produces a sequence of string pairs. Note that that File entries will be serialized as [object File] rather than as their filename (as they would in an application/x-www-form-urlencoded form).
• A record of USVString keys and USVString values.

Since FormData is explicitly mentioned, TypeScript should gladly compile it and the definition file for the dom should include the mentioned types in the constructors signature. The fact that file won't show a filename but [object File] is a logical problem at runtime, not at compiletime.

https://jsfiddle.net/3ng6qkL1/

[saschanaz]

The fact that file won't show a filename but [object File] is a logical problem at runtime, not at compiletime.

And TypeScript is all for preventing such logical typing problems.

Maybe FormData could be made generic so that this can work:

const data = new FormData<string>();
console.log(new URLSearchParams(data));

I'm not sure new FormData<string>(formElement) makes sense since the element may include non-strings.

[JirkaDellOro]

And TypeScript is all for preventing such logical typing problems.

True, On the other hand, TypeScript should not prevent standard functionality to work as intended.

[PaperStrike]

MDN isn't the standard, strictly speaking.

The file name conversion is defined in form entry list to name-value pairs conversion, HTML Standard. Click on the second bold sentence, it shows where it is used.

The note about [object File] isn't mentioned anywhere in steps to initialize a URLSearchParams, URL Standard.
It happens by implicit conversions.

[JirkaDellOro]

Now let me perform an elegant 180 after digging into it. This issue should not be labeled bug but works as intended and praised as a feature of TypeScript.

[thatbudakguy]

closing, since as others have mentioned it's not a bug for TypeScript to avoid coercing File despite this being common behavior elsewhere. thread offers several workarounds for anyone still looking to do this.

[sacru2red]

Negated types feature could clear it. in future
any not File

or
FormData methods should take a Generic #43797

[lightyaer]

Another workaround:

  const formData = new FormData();
  formData.set('something', "something");

  const searchParams = new URLSearchParams(
    formData as unknown as Record<string, string>,
  ).toString();

if value is an object, then JSON.stringify(object);