Definitelytyped: @types/jquery v3, $.fn, Property does not exist on type 'JQuery<HTMLElement>'

[Arttse]

• [x] I tried using the @types/jquery package version 3.2.12 (installed by npm or yarn) and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript (for now it's 2.5.3)
• [x] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @leonard-thieu, @borisyankov, @choffmeister, @Steve-Fenton, @Diullei, @tasoili, @seanski, @Guuz, @ksummerlin, @basarat, @nwolverson, @derekcicerone, @AndrewGaspar, @seikichi, @benjaminjackman, @JoshStrobl, @johnnyreilly, @DickvdBrink, @King2500
  
  

---

When I'm trying to create jQuery plugin using TypeScript with this (example) code:

import $ from 'jquery';

$.fn.examplePlugin = function () {
  // do something
};

I get the error:
error TS2339: Property 'examplePlugin' does not exist on type 'JQuery<HTMLElement>'

I think problem in types/jquery/index.d.ts#L71 Need something to do with it. Thank you for your help.

[Steve-Fenton]

Because you are extending jQuery with something new, you'll need to add it to the interface in the definition.

Interfaces are open, so you can put the addition in your own file, you don't need to edit the jQuery type definition.

[Arttse]

@Steve-Fenton please give me a working example. Thank you.

[leonard-thieu]

Basic example can be found at https://github.com/DefinitelyTyped/DefinitelyTyped/blob/dc178ad6fe32416622ec37de703bb72279ab4bb4/types/jquery/README.md#authoring-type-definitions-for-jquery-plugins

[Arttse]

@leonard-thieu I've tried this, it isn't work:

import $ from 'jquery';

interface ExamplePlugin {
  settings: ExamplePluginSettings;

  (behavior: 'enable'): JQuery;
  (settings?: ExamplePluginSettings): JQuery;
}

interface ExamplePluginSettings {
  title?: string;
}

interface JQuery {
  examplePlugin: ExamplePlugin;
}

$.fn.examplePlugin = function (settings) {
  // do something
};

$.fn.examplePlugin.settings = {};

Compilation errors:

script.ts(18,6): error TS2339: Property 'examplePlugin' does not exist on type 'JQuery<HTMLElement>'.
script.ts(22,6): error TS2339: Property 'examplePlugin' does not exist on type 'JQuery<HTMLElement>'.

Maybe I'm doing something wrong? Could you please show me a working example? Thank you.

[Arttse]

@Steve-Fenton this also does not work

[Steve-Fenton]

Ah, I can see the problem. The interface is only merged if it has the same common root...

jQuery is global, but your file is a module.

namespace global {
    interface JQuery {
        examplePlugin: ExamplePlugin;
    }
}

A similar fix is to move it into a separate file that isn't a module.

[Arttse]

@Steve-Fenton it doesn't work.

Here's my code (example) for this issue:

src/script.ts

import $ from 'jquery';

// Example from https://github.com/DefinitelyTyped/DefinitelyTyped/blob/dc178ad6fe32416622ec37de703bb72279ab4bb4/types/jquery/README.md#authoring-type-definitions-for-jquery-plugins
interface ExamplePlugin {
  settings: ExamplePluginSettings;

  (behavior: 'enable'): JQuery;
  (settings?: ExamplePluginSettings): JQuery;
}

interface ExamplePluginSettings {
  title?: string;
}

interface JQuery {
  examplePlugin: ExamplePlugin;
}


$.fn.examplePlugin = function (settings) {
  // do something
};

$.fn.examplePlugin.settings = {};

tsconfig.json

{
  "compilerOptions": {
    "outDir": "compiled",
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noEmitOnError": true,
    "allowSyntheticDefaultImports": true,
    "removeComments": false,
    "sourceMap": true
  },
  "include": [
    "./src"
  ]
}

package.json

{
  "scripts": {
    "compile": "tsc"
  },
  "devDependencies": {
    "@types/jquery": "3.2.12",
    "typescript": "2.5.3"
  },
  "dependencies": {
    "jquery": "3.2.1"
  }
}

You can try it yourself. Just run npm install and then npm run compile.

Output:

src/script.ts(20,6): error TS2339: Property 'examplePlugin' does not exist on type 'JQuery<HTMLElement>'.
src/script.ts(20,32): error TS7006: Parameter 'settings' implicitly has an 'any' type.
src/script.ts(24,6): error TS2339: Property 'examplePlugin' does not exist on type 'JQuery<HTMLElement>'.

[georgwittberger]

@Arttse Since you seem to be referring to my example project: I have found a way to fix the compile errors using the hints from this documentation: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/dc178ad6fe32416622ec37de703bb72279ab4bb4/types/jquery/README.md#authoring-type-definitions-for-jquery-plugins
Please pull the latest version and try again: https://github.com/georgwittberger/jquery-plugin-typescript-example

[Arttse]

@georgwittberger thank you very much for this working example! The issue seems to be closed for me.

[enochfernandez]

how do i do $(document).foundation in my angular component. I get the error 'foundation' does not exist on type 'JQuery'.

ngAfterViewChecked() {

}

[aristotll]

Does this has anything to do with generics? I write a typing file according to https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/jquery/README.md, but get same error.

[leonard-thieu]

@aristotll Removing the import statement should fix the issue.

[Mblkolo]

@aristotll, this declaration work with generic. jquery 3.3

interface JQuery<TElement> {
    spectrum: any;
}

[PandaWood]

@Arttse would you mind elaborating on exactly what fixed this for you? I can see some links to code but it's difficult to figure out the change that actually fixed it.

[flendsiva]

@Steve-Fenton it doesn't work.

Here's my code (example) for this issue:

src/script.ts
tsconfig.json
package.json
You can try it yourself. Just run npm install and then npm run compile.

Output:

src/script.ts(20,6): error TS2339: Property 'examplePlugin' does not exist on type 'JQuery<HTMLElement>'.
src/script.ts(20,32): error TS7006: Parameter 'settings' implicitly has an 'any' type.
src/script.ts(24,6): error TS2339: Property 'examplePlugin' does not exist on type 'JQuery<HTMLElement>'.

iam also faced same problem,what is do..??

[yazan9]

@Arttse would you mind elaborating on exactly what fixed this for you? I can see some links to code but it's difficult to figure out the change that actually fixed it.

I guess he won't. Got help, found a solution, and moved on ....

[Gennady-G]

I had some similar problem.

Used something like this:

    import * as $ from 'jquery';
    import * as slick from 'slick-carousel';

..

  // then in function:

      require('../../../node_modules/slick-carousel/slick/slick.js');

      (<any>$('.slider-wrap')).slick({
        dots: true,
        autoplay: true,
        autoplaySpeed: 1000
    });

p.s: install slick carousel and jQuery before:

    npm install jquery@>=1.8.0 --save-dev 
    npm i slick-carousel

[Arttse]

@PandaWood sorry for late answer. Better late than never.

At that time I was helped by using Object.assign with TypeScript generics. Referring to https://github.com/DefinitelyTyped/DefinitelyTyped/issues/20156#issuecomment-336919184 here is the specific example code: georgwittberger/jquery-plugin-typescript-example/src/example-plugin.ts#L6