Argument of type 'string' is not assignable to parameter of type '{ [key:string]:any;}

2
votes

I am getting the following error on typescript file when I try to attach a click event handler as shown below,

Argument of type 'string' is not assignable to parameter of type '{ [key:string]:any;}

enter image description here

I have jQuery 2.1.4 and jquery.TypeScript.DefinitelyTyped 3.0.4 configured in my ASP.NET Web Application.

Edit:

My typescript file is able to pickup the definition file as shown below,

enter image description here

in my JQuery.d.ts,I see the following overloads,

on(events: string, handler: (eventObject: JQueryEventObject, ...args: any[]) => any): JQuery;
on(events: string, data : any, handler: (eventObject: JQueryEventObject, ...args: any[]) => any): JQuery;
on(events: string, selector: string, handler: (eventObject: JQueryEventObject, ...eventData: any[]) => any): JQuery;
on(events: string, selector: string, data: any, handler: (eventObject: JQueryEventObject, ...eventData: any[]) => any): JQuery;
on(events: { [key: string]: any; }, selector?: string, data?: any): JQuery;
on(events: { [key: string]: any; }, data?: any): JQuery;

What am I missing? Any hint / suggestion will be greatly appreciated.

5
javascriptjquerytypescript
I ran into this a while back, and if I'm not mistaken, this is due to the ordering of the overloads in the on definition in jquery.d.ts. Basically, because the definition includes the [key:string]:any overload before the events: string overload, the TypeScript parser fails to find it. I believe the latest version of the definition file on DefinitelyTyped (3.1.1) has corrected that. – Heretic Monkey
@MikeMcCaughan, thank you. Let me try with the latest version. – Vimalan Jaya Ganesh
I tried with the latest DefinitelyTyped (3.1.1) and did not work for me. I still see the same error. – Vimalan Jaya Ganesh
What IDE are you using? It might be the IDE isn't picking up the change. For instance, Visual Studio ships with its own version of jQuery's definition. – Heretic Monkey
I am using Visual Studio 2015 Enterprise – Vimalan Jaya Ganesh

5 Answers

4
votes

I had the same problem. None of the suggested solutions in the answers and comments did solve it for me.

Turned out that the signature of my eventHandler did not specify the type JQueryEventObject for the first argument, and therefore the first overload was not applied.

enter image description here versus

enter image description here

1
votes

jquery.TypeScript.DefinitelyTyped 3.0.

Please stop using nuget for TypeScript type definitions.

Best solution:

Just download and include this file in your project : https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jquery/jquery.d.ts

More

  • Check that you are on TypeScript latest
1
votes

According to the jquery.d.ts the following typings are available for the on function: 

1. on(events: string, selector: string, handler: (eventObject: JQueryEventObject, ...eventData: any[]) => any): JQuery;
2. on(events: string, selector: string, data: any, handler: (eventObject: JQueryEventObject, ...eventData: any[]) => any): JQuery;
3. on(events: { [key: string]: any; }, selector?: string, data?: any): JQuery;
4. on(events: { [key: string]: any; }, data?: any): JQuery;

Now since you are implementing the function the following way

$(this.elementId).on("click", changeEventHandler)

Either the 3rd or the 4th typing of on will get applied, which require the first element to be of type { [key: string]: any; }. What you need to do is provide a selector to which the click function needs to be applied. So here are your options:

$(this.elementId).click(changeEventHandler)
OR
$(document).on("click", this.elementId, changeEventHandler)

The thing that you were missing is that when using the on function along with the event type and the event handler you also need to specify the DOMElement on which the listener is to be attached

1
votes

https://stackguides.com/questions/46862920 already has the answer:

$("#some-element").on("click", function(event:JQuery.Event) {
     // code
}
0
votes

There is a minor issue in jquery.d.ts file. Instead of 'on', the jquery.d.ts file has 'one' (see the image below). Changing that fixed the issue.

enter image description here