Subsequent variable declarations must be of the same type. The variable "$" must be of type "JQueryStatic", but there is a type of "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 typing, so typescript will not complain that it will not recognize $. But now the fact is that the problem is 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 problem occurs because angular -protractor also declares $, but like cssSelectorHelper instead of a JQueryStatic object.

Thing is ... I don’t use protractor at all !!!, why is it added when I import something from angular2 / code? Is there a suitable solution for this until the Angular guys fix it if they ever will.

Note: commenting on the definition in the protractor file is not a suitable workaround, I am looking for something permanent that will not disappear when someone else takes the project and starts a clean installation 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; 

from

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

Answer 2

How it works, comment out the JQueryStatic and replace the cssSelectorHelper at the bottom of angular -protractor.d.ts

 declare var browser: protractor.IBrowser; declare var by: protractor.IProtractorLocatorStrategy; declare var By: protractor.IProtractorLocatorStrategy; declare var element: protractor.Element; // declare var $: JQueryStatic; declare var $: cssSelectorHelper; declare var $$: cssArraySelectorHelper;