Hur man utökar JQuery-funktioner i TypeScript

Jag skriver om lite JS-kod till TypeScript och stöter på problem med modulimport. Till exempel vill jag skriva min toggleVisiblity-funktion. Här är koden:

/// <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();

Men problemet är att av okänd anledning läggs inte toggleVisibility till i JQuery-gränssnittet, så jag får ett fel Property 'toggleVisibility' does not exist on type 'JQuery'., även om det ser andra metoder (val, each och så vidare).

Varför fungerar det inte?

Svar #1

Försök att sätta

interface JQuery {
    toggleVisibility(): JQuery;
}

Inuti en separat fil utan import-/exportsatser. Det fungerar för mig. Fast det skulle vara intressant att veta varför.

REDIGERA: Det finns en utmärkt förklaring till detta beteende i detta svar på inlägget: Hur man utökar 'Window'-gränssnittet i TypeScript

Svar #2

Jag fick lösningen, detta fungerade för mig:

Använd JQueryStatic-gränssnittet för statisk jQuery-åtkomst som $.jGrowl(...) eller jQuery.jGrowl(...) eller i ditt fall, jQuery.toggleVisibility():

interface JQueryStatic {

    ajaxSettings: any;

    jGrowl(object?, f?): JQuery;

}

Och för dina egna specialgjorda funktioner använder du jQuery.fn.extend, använd jQuery-gränssnittet:

interface JQuery {

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

    enable(): JQuery;

    disable(): JQuery;

    check(): JQuery;

    select_custom(): JQuery;

}

Valfritt, här är mina utökade JQuery-funktioner:

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;
            }
        });
    }
});