rxjs/Subject.d.ts error : Class 'Subject<T>' incorrectly extends base class 'Observable<T>'

Question

I extracted sample template code from this tutorial and did below two steps to get started -

1. npm install // worked fine and created node_modules folder with all dependencies

2. npm start // failed with below error-

   node_modules/rxjs/Subject.d.ts(16,22): error TS2415: Class 'Subject<T>' 
     incorrectly extends base class 'Observable<T>'.
     Types of property 'lift' are incompatible.
     Type '<T, R>(operator: Operator<T, R>) => Observable<T>' is not assignable  
     to type '<R>(operator: Operator<T, R>) => Observable<R>'.
     Type 'Observable<T>' is not assignable to type 'Observable<R>'.
     Type 'T' is not assignable to type 'R'.
     npm ERR! code ELIFECYCLE
     npm ERR! errno 2
   

I see that in the subject.d.ts declaration of lift is as below -

 lift<T, R>(operator: Operator<T, R>): Observable<T>;

And in Observable.ts it is defined as below-

 lift<R>(operator: Operator<T, R>): Observable<R> {

Note:- 1. I am new to Angular2 and trying to get hold of things.

2. The error might be due to incompatible definitions of lift method

3. I read through this github thread

4. If I need to install some different version of rxjs then please tell how to uninstall and install the correct rxjs.

Edit1: I might be a bit late in responding here but I still get the same error even after using typescript 2.3.4 or rxjs 6 alpha. Below is my package.json,

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "6.0.0-alpha.0",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.2",
    "typescript": "2.3.4",
    "typings": "^1.3.2"
  }
}

Answer 1

As per this you need update typescript 2.3.4 or rxjs 6 alpha

go the your package.json file in your project update typescript or rxjs version. Example

"typescript": "2.3.4"

do npm install

update(06/29/2017):-

As per the comments typescript "2.4.0" working.

Answer 2

As others have pointed out this issue came about as a consequence of the stricter type checking of generics introduced in TypeScript 2.4. This exposed an inconsistency in a RxJS type definition and was consequently fixed in RxJS version 5.4.2. So ideal solution is to just upgrade to 5.4.2.

If you for some reason cannot upgrade to 5.4.2 you should instead use Alan Haddad's solution of augmenting the type declaration to fix it for your own project. I.e. add this snippet to your app:

// TODO: Remove this when RxJS releases a stable version with a correct declaration of `Subject`.
import { Operator } from 'rxjs/Operator';
import { Observable } from 'rxjs/Observable';

declare module 'rxjs/Subject' {
  interface Subject<T> {
    lift<R>(operator: Operator<T, R>): Observable<R>;
  }
}

His solution will leave no other side-effects and is thus great. Alternatively proposed solutions have more side-effects for your project setup and thus are less ideal:

• turn off the stricter generic checks with compiler flag --noStrictGenericChecks. This will however make it less strict for your own app, which you can do, but might introduce inconsistent type definitions like it did in this RxJS instance which in turn might introduce more bugs in your app.
• Not checking the types in libraries with flag --skipLibCheck set to true. This is not ideal either as you might not get some type errors reported.
• Upgrading to RxJS 6 Alpha - given that there are breaking changes this might break your app in badly documented ways, seeing as it's still in alpha. Additionally if you have other dependencies like Angular 2+ this might not really be a supported option, breaking the framework itself now or down the line. Which I think is an even harder issue to solve.

Answer 3

An admitted band-aid approach is to add the following to your tsconfig.json file until the RxJS folks decide what they want to do about the error when using TypeScript 2.4.1 :

"compilerOptions": {

    "skipLibCheck": true,

 }