How can we create a custom jquery plugin using typescript?

Question

I need to use a jquery custom plugin in my application and how can i create a custom jquery plugin using typescript. I have googled a lot and i just got below links

http://typescript.codeplex.com/discussions/398401

Define a custom jQuery UI widget in TypeScript

The above links uses plain javascript code, however javascript code will work in typescript but the issue with this is i can't use typescript classes with in this plugin. Is there any way to use typescript classes with in jquery plugin or else is there any other way to create jquery plugin in typescript.

Any suggestions should be appreciated.

Typescript creates Javascript. So, what are you struggling with? learn.jquery.com/plugins/basic-plugin-creation — WiredPrairie
– WiredPrairie, Commented Oct 25, 2013 at 10:56
@WiredPrairie,I know but I have typescript widget i need to convert into plugin. Is there any way to modify the typescript custom widget into typescript custom plugin? — Karthi Keyan
– Karthi Keyan, Commented Oct 25, 2013 at 11:48
What' a "custom widget"? You'll need to use jQuery Plugin authoring techniques. — WiredPrairie
– WiredPrairie, Commented Oct 25, 2013 at 12:12

WiredPrairie · Accepted Answer · 2015-07-17 01:35:08Z

7

There's very little difference between using JavaScript and Typescript when creating a plugin. You'll likely want to grab the jQuery definition for TypeScript from here first and add it to your project (or include it on the command line, etc., depending on your development environment).

Then, just write the plugin and use whatever classes and existing code you want. The example below doesn't do anything other than demonstrate that it's hardly any different from the original JavaScript plugin techniques.

(function($) {
    $.fn.myPlugin = function() {
        // do something
        return this;
    };

    $.fn.myEachPlugin = function(options)  {
        var settings: any = $.extend({
            color: "#ffff00"
        }, options);

        return this.each(function() {
            // do something ...
        });
    };

})(jQuery);

edited Jul 17, 2015 at 1:35

answered Oct 25, 2013 at 12:28

WiredPrairie

59.9k18 gold badges120 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MarkusT Over a year ago

Your answer uses the 'fat arrow' anonymous function notation four times. In two occasions, the old-style 'function() {' construct needs to be used, because of the way TypeScript handles 'this': see the TypeScript Handbook. Basically, when using the fat arrow syntax, 'this' points to whatever 'this' was outside the anonymous function. In this case, you need the traditional, normal way, so you need: $.fn.myPlugin = function() { and $.fn.myEachPlugin = function(options) {

Métoule · Accepted Answer · 2022-04-27 08:27:29Z

1

To expand on WiredPrairie's answer, here's a full typescript plugin:

export interface MyOptions {

}

// plugin definition
$.fn.myPlugin = function(this: JQuery, options: MyOptions): JQuery {
    return this.each(function (this: HTMLElement): void {
        // do something
    });
}

// make the plugin available outside this file
declare global {
    interface JQuery {
        myPlugin(options: MyOptions): this;
    }
}

answered Apr 27, 2022 at 8:27

Métoule

14.8k3 gold badges67 silver badges94 bronze badges

1 Comment

Studocwho Over a year ago

If you add the export interface and declare global objects into a .d.ts file, you can get type acquisition for code completions/parameter info. (works with vscode's intellisense)

Collectives™ on Stack Overflow

How can we create a custom jquery plugin using typescript?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related