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;}

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,

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.

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;}

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,

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.

• javascript
• jquery
• typescript

• 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 Commented Sep 21, 2016 at 21:25
• @MikeMcCaughan, thank you. Let me try with the latest version. – JGV Commented Sep 21, 2016 at 21:27
• I tried with the latest DefinitelyTyped (3.1.1) and did not work for me. I still see the same error. – JGV Commented Sep 21, 2016 at 21:32
• 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 Commented Sep 21, 2016 at 21:36
• I am using Visual Studio 2015 Enterprise – JGV Commented Sep 21, 2016 at 21:37

5 Answers 5

I had the same problem. None of the suggested solutions in the answers and ments 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.

versus

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./DefinitelyTyped/DefinitelyTyped/blob/master/jquery/jquery.d.ts

More

• Check that you are on TypeScript latest

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

https://stackoverflow./questions/46862920 already has the answer:

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

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.