The property 'jqGrid' does not exist on value of type 'JQuery'

Question

I am using Typescript with jqGrid and jQuery.

On the following line:

jQuery(this).jqGrid('editGridRow', rowid, {
    ...

I get the message:

The property 'jqGrid' does not exist on value of type 'JQuery'.

Any ideas on how to correct this problem?

Enterotomy

did you include the jQgrid library files... is there any other error in the browser console before this – Spiegelman

The library files are included, and the grid is working fine in the browser. This error message occurs in visual studio and is a typescript compiler error message. – Enterotomy

Answer 1

I suppose that you use jquery.TypeScript.DefinetlyTyped NuGet Package.

In that case add file ~/Scripts/typings/custom.d.ts with following content:

/// <reference path="jquery/jquery.d.ts"/>
interface JQuery { jqGrid: any; }

---

Update: Above solution is general and works in all cases. Better solution is to...

Install jqgrid.TypeScript.DefinitelyTyped NuGet Package.

Eryneryngo

That did the trick, obviously you must also add a reference in your typescript code like so /// <reference path="./Scripts/typings/custom.d.ts" /> – Enterotomy

Answer 2

The problem is that JQuery grid is a plugin. It seems like you have a definition file for the JQuery library but not for the JQuery Grid plugin. I checked on https://github.com/borisyankov/DefinitelyTyped and there does not appear to be a type definition for this particular plugin. There are a few things you could do.

• You could assign jQuery to a variable of "any" type:

var localJq : any = jQuery(this); localJq.jqGrid('editGridRow', rowid, { ... });

This will fool the compiler and let you access properties on the var that are not defined in a definition file.

• You could create a definition file which adds the jqGrid properties to jquery. This definition file needs to be referenced in any typescript files where you are using jqGrid. Here is an example of a definition file for a simple JQuery plugin. As you can see, it is easy to extend the JQuery definition with additional properties.

Landmark

Simply add interface jQuery { jqGrid : any } to any of your own definition files to extend the existing interface. OR provide your own decent definition file and initiate a PR for the GitHub repo. – Sallie

I had tried defining the interface before, but for some reason defining the jqGrid interface does not work. I am able to define other interfaces successfully. I am able to "trick" the compiler and use (<amy>jQuery(this)).jqGrid(.......) and get rid of the compiler error message, but would like to be able to define the interface if possible. – Enterotomy

you also have to reference the definition file that the interface is defined in, or else you have to define it in the same file as you are using it. Simply add "/// <reference path="jqgrid.d.ts" />" to the top of your JS files. Also, you aren't just defining an interface for jqGrid, you also have to declare that jqGrid is party of jQuery with this line from the comment above "interface jQuery { jqGrid : any }" – Landmark

Thanks usethedoorknob for the assistance, I had created a jqgrid.d.ts and referenced it from within my typescript file, and I had also tried including the "interface jQuery { jqGrid : any }" directly in the typescript file. Neither would get rid of the error/warning from the compiler. Perhaps I am missing what needs to be in the jqgrid.d.ts, I looked at your jquery.timer.d.ts example but from it I concluded "interface jQuery { jqGrid : any }" was supposed to be in it and then referenced from the .ts file – Enterotomy