如何在 TypeScript 中扩展 JQuery 函数

我正在 TypeScript 上重写一些 JS 代码，并遇到模块导入问题。例如，我想写我的toggleVisiblity功能。这是代码：

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

但问题是不知什么原因toggleVisibility没有添加到JQuery接口因此我收到错误Property 'toggleVisibility' does not exist on type 'JQuery'.，尽管它看到了其他方法（val, each等等）。

为什么它不起作用？

尝试将

interface JQuery {
    toggleVisibility(): JQuery;
}

在没有导入/导出语句的单独文件内。 这对我有用。但知道为什么会很有趣。

EDIT：在这个帖子的答案中对此行为有一个很好的解释：如何扩展“Window”打字稿接口 https://stackoverflow.com/questions/30960386/how-to-extend-the-window-typescript-interface#answer-30961346