title: How to extend JQuery functions in TypeScript
body: <p>I'm rewriting some JS code on TypeScript and encounter with problems with module import. For example, I want to write my <code>toggleVisiblity</code> function. Here is code:</p>
  
  <pre><code>/// &lt;reference path="../../typings/jquery/jquery.d.ts" /&gt;
  
  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();
  </code></pre>
  
  <p>But the problem is that for unknown reason <code>toggleVisibility</code> is not added to <code>JQuery</code> interface thus I get an error <code>Property 'toggleVisibility' does not exist on type 'JQuery'.</code>, although it sees other methods (<code>val</code>, <code>each</code> and so on).</p>
  
  <p>Why is it not working?</p>
  
  <p><a href="https://i.stack.imgur.com/M8D9O.png" rel="noreferrer"><img src="https://i.stack.imgur.com/M8D9O.png" alt="enter image description here"></a></p>