How to extend JQuery functions in TypeScript

Question

I'm rewriting some JS code on TypeScript and encounter with problems with module import. For example, I want to write my toggleVisiblity function. Here is code:

/// <reference path="../../typings/jquery/jquery.d.ts" />

import * as $ from "jquery";

interface JQuery {
    toggleVisibility(): JQuery;
}

$.fn.extend({
    toggleVisibility: function () {
        return this.each(function () {
            const $this = $(this);
            const visibility = $this.css('visibility') === 'hidden' ? 'visible' : 'hidden';
            $this.css('visibility', visibility);
        });
    }
});

const jQuery = $('foo');
const value = jQuery.val();
jQuery.toggleVisibility();

But the problem is that for unknown reason toggleVisibility is not added to JQuery interface thus I get an error Property 'toggleVisibility' does not exist on type 'JQuery'., although it sees other methods (val, each and so on).

Why is it not working?

It seems your interface JQuery is not merged with the original one. Maybe it should be imported. How have you imported the definitions for jQuery ? With the new @types system? — Paleo
– Paleo, Commented Dec 3, 2016 at 17:26

Jack Miller · Accepted Answer · 2018-05-30 06:43:21Z

39

Try putting the

interface JQuery {
    toggleVisibility(): JQuery;
}

Inside a seperate file without import/export statements. This works for me. Though it wold be interesting to know why.

EDIT: There is an excellent explanation for this behaviour in this answer to post: How to extend the 'Window' typescript interface

edited May 30, 2018 at 6:43

Jack Miller

7,8064 gold badges53 silver badges82 bronze badges

answered Dec 4, 2016 at 10:08

mode777

3,2372 gold badges26 silver badges34 bronze badges

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

4 Comments

Alex Zhukovskiy Over a year ago

I'm going to create an issue in TS github, maybe it will be fixed. Thank you for an answer.

Paleo Over a year ago

@AlexZhukovskiy Please give the link to the issue, I'm interested too.

Mojtaba Over a year ago

For those who are struggling to know where to put this file (like myself); this link explains very well.

Kristian Oye Over a year ago

Oh thank goodness I found this post. I was starting to grow gray hairs over documenting this API.

Displee · Accepted Answer · 2017-11-03 08:43:06Z

11

I got the solution, this worked for me:

Use the JQueryStatic interface for static jQuery access like $.jGrowl(...) or jQuery.jGrowl(...) or in your case, jQuery.toggleVisibility():

interface JQueryStatic {

    ajaxSettings: any;

    jGrowl(object?, f?): JQuery;

}

And for your own custom made functions you use using jQuery.fn.extend, use the JQuery interface:

interface JQuery {

    fileinput(object?): void;//custom jquery plugin, had no typings

    enable(): JQuery;

    disable(): JQuery;

    check(): JQuery;

    select_custom(): JQuery;

}

Optional, here are my extended JQuery functions:

jQuery.fn.extend({
    disable: function () {
        return this.each(function () {
            this.disabled = true;
        });
    },
    enable: function () {
        return this.each(function () {
            this.disabled = false;
        });
    },
    check: function (checked) {
        if (checked) {
            $(this).parent().addClass('checked');
        } else {
            $(this).parent().removeClass('checked');
        }
        return this.prop('checked', checked);
    },
    select_custom: function (value) {
        $(this).find('.dropdown-menu li').each(function () {
            if ($(this).attr('value') == value) {
                $(this).click();
                return;
            }
        });
    }
});

answered Nov 3, 2017 at 8:43

Displee

7409 silver badges21 bronze badges

1 Comment

Pilaf T. Pilafian Over a year ago

This approach seems to clobber the JQuery declarations for regular functions, like .click() and .parent(). Any idea why?

Alexander Belov · Accepted Answer · 2023-12-12 14:51:33Z

0

I had a similar problem but with my bootstrapDP function extending JQuery in the same way.

Solution:

    declare global {
        interface JQuery {
            bootstrapDP: any;  // replace 'any' with the actual type if known
        }
    }

Explanation:

This code declares a global augmentation of the JQuery interface, adding my bootstrapDP method to it. After adding this code, TypeScript should recognize bootstrapDP as a method on jQuery objects.

Here is some documentation about global auhmentation: link

answered Dec 12, 2023 at 14:51

Alexander Belov

114 bronze badges

Collectives™ on Stack Overflow

How to extend JQuery functions in TypeScript

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related