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?

Improve this question

7 Answers 7

Reset to default
211

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;
    }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

giving me: Error:(44, 23) TS2339: Property 'printArea' does not exist on type 'ElementFinder'.
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.
Declaring the interface seems to work great. Also its much cleaner than casting to <any> everywhere
This wasn't working for me, but eventually I stumbled across stackoverflow.com/questions/30960386/…, and realised I needed declare global { ... } around the interface declaration.
59

I think this is the most readable solution:

($("div.printArea") as any).printArea();
Improve this answer

Comments

15

You can cast it to 

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

Ex: date picker initialize using jquery

(<any>$('.datepicker') ).datepicker();
Improve this answer

Comments

4

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

// @ts-ignore
$("div.printArea").printArea();
Improve this answer

Comments

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.

Improve this answer

8 Comments

Nope. He is wrapping an object with $. It's not static $ anymore
Hmm, you sure? I tested that in a project and it worked.
yup. Your case $.inviewport(el) Ops case $('selector').printArea
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.
$('selector').printArea compiles? I don't think so. $.printArea will compile though. You have been very polite so no offence taken or intended :)
|
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.

Improve this answer

3 Comments

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
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 /// <reference path="jquery.extension.js" /> 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.
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.
2

You can also write it like this:

let elem: any;
elem = $("div.printArea");
elem.printArea();
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.