92

I am only using one line of jQuery in my application:

$("div.printArea").printArea();

But this is giving me a Typescript error:

The property 'printArea' does not exist on type JQuery?

Can someone tell me how I can stop this error appearing?

WillardSolutions
  • 2,316
  • 4
  • 28
  • 38
Alan2
  • 23,493
  • 79
  • 256
  • 450

7 Answers7

209

You could cast it to <any> or extend the jquery typing to add your own method.

 (<any>$("div.printArea")).printArea();

Or, add your own custom methods (Assuming this is added by yourself as a part of custom plugin)

declare global {
    interface JQuery {
        printArea(): void;
    }
}
Top-Master
  • 7,611
  • 5
  • 39
  • 71
PSL
  • 123,204
  • 21
  • 253
  • 243
  • giving me: `Error:(44, 23) TS2339: Property 'printArea' does not exist on type 'ElementFinder'.` – user47376 Feb 25 '16 at 10:16
  • 1
    If you try the `interface JQuery` way in an external module and define a function parameter as a JQuery type and attempt to call it from another file, TypeScript will complain that there's two types named JQuery that are unrelated. – Sam Rueby Aug 08 '18 at 12:01
  • Declaring the interface seems to work great. Also its much cleaner than casting to everywhere – Decoded May 11 '19 at 16:57
  • 1
    This wasn't working for me, but eventually I stumbled across https://stackoverflow.com/questions/30960386/how-to-extend-the-window-typescript-interface, and realised I needed `declare global { ... }` around the interface declaration. – James Hopkin Dec 13 '20 at 12:33
59

I think this is the most readable solution:

($("div.printArea") as any).printArea();
Eldamir
  • 9,888
  • 6
  • 52
  • 73
15

You can cast it to 

(<any>$('.selector') ).function();

Ex: date picker initialize using jquery

(<any>$('.datepicker') ).datepicker();
Yanis.F
  • 612
  • 6
  • 18
vishnu
  • 241
  • 3
  • 4
4

You can also use the ignore syntax instead of using (or better the 'as any') notation:

// @ts-ignore
$("div.printArea").printArea();
Guntram
  • 961
  • 14
  • 19
3

For your example, you'd add this:

interface JQuery{
    printArea():void;
}

Edit: oops, basarat is correct below. I'm not sure why I thought it was compiling but I've updated this answer.

AlexB
  • 687
  • 2
  • 7
  • 15
  • Nope. He is wrapping an object with $. It's not static $ anymore – basarat Jul 27 '14 at 23:15
  • Hmm, you sure? I tested that in a project and it worked. – AlexB Jul 27 '14 at 23:29
  • yup. Your case `$.inviewport(el)` Ops case `$('selector').printArea` – basarat Jul 28 '14 at 00:09
  • Sorry, don't mean to quibble, but my code works for me. The question seems to be about getting the code to compile, so if my code compiles, what's the issue with it? Note, my second example using printArea() works as well. – AlexB Jul 28 '14 at 00:20
  • `$('selector').printArea` compiles? I don't think so. `$.printArea` will compile though. You have been very polite so no offence taken or intended :) – basarat Jul 28 '14 at 00:50
  • Yes, it compiles for me. No offense taken :-) – AlexB Jul 28 '14 at 01:30
  • Oh, boy. I thought it was compiling but I guess it wasn't. I blame the IDE. – AlexB Jul 28 '14 at 01:32
  • You need to wrap it inside a `declare global { }`; otherwise, it won't probably work. – Babak May 22 '21 at 03:24
2

Since printArea is a jQuery plugin it is not included in jquery.d.ts.

You need to create a jquery.printArea.ts definition file.

If you create a complete definition file for the plugin you may want to submit it to DefinitelyTyped.

Albin Sunnanbo
  • 46,430
  • 8
  • 69
  • 108
  • 1
    And make sure that your tsconfig.json is setup right too. If it has a "types" setting then only the types listed will be recognized. If not, then it will recognize everything in node_modules/@types – Dan Cancro Aug 09 '17 at 14:34
  • If I define something earlier in a file, and then reference it later in a file, IntelliSense recognizes it and assists me. When I put ``/// `` at the top of the file, isn't IntelliSense supposed to read that file and infer that code just as if I'd written it in my file? Instead, it's still flagging errors on my valid code. – Travis Bemrose Feb 13 '23 at 19:44
  • Hmm. I guess what's happening is that `jquery.extension.js` is not declaring new types to overwrite existing types (something IntelliSense would read), but it's programmatically extending the types, and IntelliSense isn't smart enough to determine the end result of that code. Ugh. I really don't want to write a whole type file for this massive library. – Travis Bemrose Feb 13 '23 at 20:02
2

You can also write it like this:

let elem: any;
elem = $("div.printArea");
elem.printArea();
iqqmuT
  • 653
  • 6
  • 8