Search code examples
angulartypescriptionic-frameworkstaticpublic

Type '() => Observable<any>' is not assignable to type '() => Observable<any>'

I'm making an ionic 2 app using typescript and after upgrading the local typescript installation to version 2.2.1 from version 2.1.0 I have started receiving this error:

Type '() => Observable' is not assignable to type '() => Observable'. Two different types with this name exist, but they are unrelated. Type 'Observable' is not assignable to type 'Observable'. Two different types with this name exist, but they are unrelated.

This error repeats for each of the following lines

L28:  this.onDisconnect = Network.onDisconnect
L29:  this.onchange = Network.onchange
L30:  this.ontypechange = Network.ontypechange

Network is a class imported from ionic-native its onDisconnect, onchange and ontypechange methods are defined as follow:

static onDisconnect(): Observable<any>;
static onchange(): Observable<any>;
static ontypechange(): Observable<any>;

I have onDisconnect, onchange, and ontypechange as public properties of a custom class (@Injectable() class) called "Network" and I have defined them as follows: 

L15:  public onDisconnect: ()=>Observable<any>
L16:  public ontypechange: ()=>Observable<any>
L17:  public onchange: ()=>Observable<any>

I have three questions?

First: Would someone help me understand what the error really means in typescript and why it occurs as such in my code.

Second: While I do know I could just extend the class, I do not want to do it. So I am asking, does the difference in declaring my methods as public while the ones in the class are static cause this problem?

Third: what's the difference of these two kinds of defining a property on a class?

EDIT:

I just realized that I had previously tried extending the Network class and this failed due to the static declaration

Solution

  • You have two different versions of rxjs lurking in your node_modules tree, and TS does not know that they are the "same".

    The first thing to try would be to clear your entire node_modules directory, flush the npm cache, and redo npm install.

    If that does not solve the problem, the underlying issue is likely to be that different dependencies have specified rxjs versions which are incompatible, forcing npm to bring in a separate version of rxjs for one or more of them (which it will place in the node_modules directory under some module). You will see a structure such as

    node_modules
  dependencyA
  rxjs
  dependencyB
    node_modules
      rxjs

    If this is what is happening, then you will have no option but to track down the offending version requirement. For instance, the top level package.json may have rxjs: "^5.2.0", whereas dependencyB/package.json may have rxjs: "5.0.0".