Interface merging is not working correctly in some cases

[Pzixel]

TypeScript Version: 2.0.10

For unknown reason TypeScript does not merge interfaces in case if interface declaration is followed by its usage, for example:

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

Expected behavior:
Compiles without errors

Actual behavior:

Property 'toggleVisibility' does not exist on type 'JQuery'.

However, if I extract interface declaration in separate file (e.g. interface.ts) it compiles fine:

interface.ts

interface JQuery {
    /** Toggles visibility of elements */
    toggleVisibility(): JQuery;
}

main.ts

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

import * as $ from "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();

[RyanCavanaugh]

See http://stackoverflow.com/questions/30960386/how-to-extend-the-window-typescript-interface (there we're talking about Window / window in place of $ / JQuery here) and also http://stackoverflow.com/questions/12709074/how-do-you-explicitly-set-a-new-property-on-window-in-typescript/40204572#40204572 for using declare global, or in the handbook https://www.typescriptlang.org/docs/handbook/declaration-merging.html#global-augmentation