encodeURIComponent should accept any value type

[2is10]

TypeScript Version: 2.5.2

Code

encodeURIComponent(true);

Expected behavior:
tsc compiles with no errors.

Actual behavior:
error TS2345: Argument of type 'true' is not assignable to parameter of type 'string'.

Discussion:

encodeURIComponent is currently defined liked this:

declare function encodeURIComponent(uriComponent: string): string; 

In reality, encodeURIComponent accepts any value and coerces it to a string if necessary. The first step in its definition in the ES6 spec reads:

1. Let componentString be ToString(uriComponent).

It’s pretty common to pass true or false or a number like 0 or 10 as a query parameter, for instance. Here are two possible ways to broaden the definition:

declare function encodeURIComponent(uriComponent: any): string; 

declare function encodeURIComponent(uriComponent: string | number | boolean): string; 

The any option would be technically correct, but passing null or undefined or a non-primitive value is usually a bug (in my experience). You can use your own judgment about how broadly the uriComponent argument should be defined. I’m specifically interested in using number and boolean.

[mhegazy]

Similar discussion can be found in #4002.

We have chosen to be more strict with the standard library and only allow strings, not things that can be coerced into string by the engine.

[rattrayalex-stripe]

I think this is different than #4002, since it explicitly/transparently does coercion for the return value, not merely for a comparison value.

I probably never intend to do isFinite(someBoolean), but I could intend to use encodeURIComponent(someBoolean) as a shorthand for encodeURIComponent(someBoolean.toString()) since it has the same effect

[mhegazy]

Would take a PR for it.

[neoncube2]

I just ran into this when trying to encode numbers, too.

Doing something like the below code gives a compile-time error, which, as someone more used to plain JavaScript, was unexpected.

getUrl(column: number) { return 'http://example.com/' + encodeUriComponent(column); }

[jdalrymple]

Is there a way to override the declaration in the mean time?

[jdalrymple]

Figured it out:

declare global {
  function encodeURIComponent(uriComponent: string | number | boolean): string; 
}

[NN---]

@jdalrymple Do you have time to submit PR , please ?

[smockle]

Opened PR #31103

From this issue’s description:

It’s pretty common to pass true or false or a number like 0 or 10 as a query parameter, for instance. Here are two possible ways to broaden the definition:

declare function encodeURIComponent(uriComponent: any): string; 
declare function encodeURIComponent(uriComponent: string | number | boolean): string; 

The any option would be technically correct, but passing null or undefined or a non-primitive value is usually a bug (in my experience). You can use your own judgment about how broadly the uriComponent argument should be defined. I’m specifically interested in using number and boolean.

I opted for the first solution (using any) because it more closely matches the ES5 spec, but I see merit in @2is10’s second solution as well.