Errore rxjs / Subject.d.ts: la classe "Subject <T>" estende in modo errato la classe base "Observable <T>"

Ho estratto il codice del modello di esempio da questo tutorial e ho seguito due passaggi per iniziare:

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

2. npm start // fallito con il seguente errore-

   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

Vedo che nell'oggetto.d. la sua dichiarazione di ascensore è la seguente:

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

E in Observable.ts è definito come di seguito-

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

Nota: - 1. Sono nuovo in Angular2 e sto cercando di ottenere informazioni.

2. L'errore potrebbe essere dovuto a definizioni incompatibili del metodo lift

3. Ho letto questo thread di GitHub

4. Se ho bisogno di installare una versione diversa di rxjs, ti preghiamo di indicare come disinstallare e installare rxjs corretto.

Edit1: potrei essere un po 'in ritardo nel rispondere qui, ma ricevo ancora lo stesso errore anche dopo aver usato il dattiloscritto 2.3.4 o rxjs 6 alpha . Di seguito è riportato il mio 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"
  }
}

Per questo motivo è necessario aggiornare il dattiloscritto 2.3.4 o rxjs 6 alpha

vai al tuo file package.json nel tuo dattiloscritto di aggiornamento del progetto o nella versione rxjs. Esempio

"typescript": "2.3.4"

fare npm install

aggiornamento (29/06/2017): -

Come per i commenti dattiloscritto "2.4.0"funzionanti.

Come altri hanno sottolineato, questo problema è nato come conseguenza del controllo del tipo più rigoroso dei generici introdotto in TypeScript 2.4. Ciò ha rivelato un'incongruenza nella definizione del tipo RxJS ed è stato di conseguenza risolto nella versione 5.4.2 di RxJS . Quindi la soluzione ideale è semplicemente aggiornare alla 5.4.2.

Se per qualche motivo non puoi eseguire l'aggiornamento a 5.4.2 dovresti invece utilizzare la soluzione di Alan Haddad di aumentare la dichiarazione del tipo per risolverlo per il tuo progetto. Ad esempio, aggiungi questo snippet alla tua 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>;
  }
}

La sua soluzione non lascerà altri effetti collaterali ed è quindi eccezionale. Le soluzioni proposte in alternativa hanno più effetti collaterali per la configurazione del progetto e quindi sono meno ideali:

• disattivare i controlli generici più severi con il flag del compilatore --noStrictGenericChecks. Ciò tuttavia lo renderà meno rigoroso per la tua app, cosa che puoi fare, ma potrebbe introdurre definizioni di tipo incoerenti come ha fatto in questa istanza RxJS che a sua volta potrebbe introdurre più bug nella tua app.
• Non controllare i tipi nelle librerie con flag --skipLibCheck impostato su true. Anche questo non è l'ideale in quanto potresti non ricevere alcuni errori di tipo segnalati.
• Aggiornamento a RxJS 6 Alpha: dato che ci sono modifiche di rottura, ciò potrebbe danneggiare la tua app in modi mal documentati, visto che è ancora in alpha. Inoltre, se hai altre dipendenze come Angular 2+, questa potrebbe non essere un'opzione supportata, interrompendo il framework stesso ora o su tutta la linea. Che penso sia un problema ancora più difficile da risolvere.

Un approccio ammesso di cerotto consiste nell'aggiungere quanto segue al file tsconfig.json fino a quando le persone RxJS non decidono cosa vogliono fare riguardo all'errore quando usano TypeScript 2.4.1:

"compilerOptions": {

    "skipLibCheck": true,

 }

È possibile aggirare temporaneamente il problema utilizzando Module Augmentation

Il codice seguente ha risolto il problema per me. Una volta che RxJS ha una versione stabile che non presenta questo problema, dovrebbe essere rimosso.

// augmentations.ts
import {Operator} from 'rxjs/Operator';
import {Observable} from 'rxjs/Observable';

// TODO: Remove this when a stable release of RxJS without the bug is available.
declare module 'rxjs/Subject' {
  interface Subject<T> {
    lift<R>(operator: Operator<T, R>): Observable<R>;
  }
}

Sebbene sia forse ironico che RxJS stesso faccia un uso così intenso di questa tecnica per descrivere la propria forma, in realtà è generalmente applicabile a una serie di problemi.

Sebbene ci siano certamente limiti e spigoli, parte di ciò che rende potente questa tecnica è che possiamo usarla per migliorare le dichiarazioni esistenti rendendole più sicure senza biforcazione e mantenendo l'intero file.

"dependencies": {
"@angular/animations": "^4.3.1",
"@angular/common": "^4.3.1",
"@angular/compiler": "^4.3.1",
"@angular/compiler-cli": "^4.3.1",
"@angular/core": "^4.3.1",
"@angular/forms": "^4.3.1",
"@angular/http": "^4.3.1",
"@angular/platform-browser": "^4.3.1",
"@angular/platform-browser-dynamic": "^4.3.1",
"@angular/platform-server": "^4.3.1",
"@angular/router": "^4.3.1",
"core-js": "^2.4.1",
"rxjs": "^5.4.2",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/compiler-cli": "^2.3.1",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.28.3",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "^2.3.4",
"typings": "^1.3.2"
}

in package.json "rxjs": "^5.4.2", e "typescript": "^ 2.3.4", quindi npm install e ng serve il suo funzionamento.

Solo un po 'di dettagli, nel tentativo di mettere i miei due centesimi.

Il problema sorge quando aggiorniamo Typescript all'ultima versione, che ormai era TypeScript 2.4.1 , ["come amiamo gli aggiornamenti :) "], e come menzionato da @ Jonnysai nella sua risposta e nel link fornito lì, c'è una discussione dettagliata riguardante il problema e le sue soluzioni.

Allora, che cosa ha lavorato per me era:
1. Ho dovuto Un installare dattiloscritto 2.4.1 prima, andando su Pannello di controllo > Programmi e funzionalità ...
2. Installare, di nuovo, dattiloscritto 2.4.0 , e quindi assicurarsi, in package.jsonfile, hai questa configurazione, come menzionato qui in un dettaglio piuttosto breve. Puoi scaricare TypeScript 2.4.0 da qui , per Visual Studio 2015

Puoi usare temporaneamente il file --noStrictGenericChecks flag per aggirare questo problema in TypeScript 2.4.

Si trova --noStrictGenericCheckssulla riga di comando o solo "noStrictGenericChecks": truenel "compilerOptions"campo intsconfig.json .

Tieni presente che RxJS 6 avrà questo corretto.

Vedi questa domanda simile: come posso aggirare questo errore in RxJS 5.x in TypeScript 2.4?

Modificare la seguente riga di Subject.d.tsfile:

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

per:

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

Il tipo restituito dovrebbe probabilmente essere Observable<R>piuttosto cheObservable<T>

Mantieni l'opzione noStrictGeneric true nel file tsconfig.config

{
    "compilerOptions": {
        "noStrictGenericChecks": true
    }
}

Aggiungi "noStrictGenericChecks": true nel file tsconfig.json sotto il nodo "compilerOptions" come mostrato nell'immagine sottostante e nell'applicazione di compilazione. Ho riscontrato lo stesso errore dopo aver aggiunto questo errore risolto.

Ho trovato lo stesso problema e l'ho risolto utilizzando "rxjs": "5.4.1" , "typescript": "~ 2.4.0" e aggiungendo "noStrictGenericChecks": true in tsconfig.json.

RxJS 6 risolverà questo problema, ma come soluzione temporanea, puoi utilizzare l' noStrictGenericChecksopzione del compilatore.

In tsconfig.json, metterlo in compilerOptionse impostarlo su true.

{
    "compilerOptions": {
        "noStrictGenericChecks": true
    }
}

Sulla riga di comando è --noStrictGenericChecks.

Perché sta succedendo:

TypeScript 2.4 ha una modifica di rigore e Subject non viene elevato all'osservabile corretto. La firma avrebbe dovuto davvero essere

(operator: Operator) => Observable

Questo verrà risolto in RxJS 6.

Vai al file Package.json e modifica la configurazione seguente

...
  "rxjs": "5.4.1",
  "typescript": "~2.4.0"
...

Funzionerà

L'utilizzo di quanto sopra da solo non ha aiutato, tuttavia, utilizzando il seguente approccio: Come posso aggirare questo errore "Il soggetto estende in modo errato Observable" in TypeScript 2.4 e RxJs 5

risolto i problemi. Viene anche menzionato che il problema è stato risolto in RxJs 6, quindi questa è più una soluzione temporanea, che mi ha aiutato a eseguire con successo questo ottimo esempio (che è stato compilato prima ma ha fornito l'errore durante il tempo di caricamento): Sviluppo dell'applicazione Angular 4 con Bootstrap 4 e TypeScript

reinstallare rxjs -> npm install rxjs @ 6 rxjs-compat @ 6 --salva

Ora non abbiamo bisogno del modulo ionic-native - abbiamo solo bisogno di @ ionic-native / core. Correre

npm uninstall ionic-native --save

Risolverà il tuo problema ..

basta aggiungere

"noStrictGenericChecks": true

al tuo tsconfig.json

grazie la risposta di zmag e Rahul Sharma, funziona! @zmag @Rahul Sharma

  "rxjs": "5.4.1",
  "typescript": "~2.4.0"

il mio problema è il seguente:

typings/globals/core-js/index.d.ts:3:14 - error TS2300: Duplicate identifier

Apporta modifiche come.

Vai al file Package.json e modifica la configurazione seguente

  "rxjs": "5.4.1",
  "typescript": "~2.4.0"

sì, il problema era con TypeScript 2.4.1 L'ho appena disinstallato dal pannello di controllo e funziona per me poiché Visual Studio 2017 ha già questo.