Subsequent variable declarations must have the same type. Variable '$' must be of type 'JQueryStatic', but here has type 'cssSelectorHelper'

Question

I have a very simple file:

/// <reference path="../typings/browser/ambient/jquery/jquery" />
import {Component} from "angular2/core";

@Component({})
export class AppComponent{

    constructor(){
        $.isEmptyObject({});
    }

}

I installed jQuery typings so typescript wouldn't complain about not recognizing $. But now the thing is complaining about the issue in the question:

Error:(1679, 13) TS2403: Subsequent variable declarations must have the same type.  Variable '$' must be of type 'JQueryStatic', but here has type 'cssSelectorHelper'.

This issue happens because angular-protractor is declaring $ as well but as a cssSelectorHelper instead of a JQueryStatic object.

Thing is... I am not using protractor at all !!!, why is it getting added when I import something from angular2/code? Is there a decent workaround for this until Angular guys fix this, if they ever do.

Note: commenting out the definition in the protractor file is not a decent workaround, I'm looking for something permanent that won't go away when someone else grabs the project and runs a clean install or when we update the angular library.

Answer 1

in the d.ts file replace

declare module "jquery" {
    export = $;
}
declare var jQuery: JQueryStatic;
declare var $: JQueryStatic;

with

declare module "jquery" {
    export = jQuery;
}
declare var jQuery: JQueryStatic;