Fehler rxjs / Subject.d.ts: Die Klasse 'Subject <T>' erweitert die Basisklasse 'Observable <T>' fälschlicherweise.

89

Ich habe Beispielvorlagencode aus diesem Tutorial extrahiert und im Folgenden zwei Schritte ausgeführt, um loszulegen:

  1. npm install // worked fine and created node_modules folder with all dependencies
  2. npm start // fehlgeschlagen mit unten Fehler-

    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

Ich sehe, dass in der subject.d.ts Erklärung des Aufzugs wie folgt ist -

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

Und in Observable.ts ist es wie folgt definiert:

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

Hinweis: - 1. Ich bin neu in Angular2 und versuche, Dinge in den Griff zu bekommen.

  1. Der Fehler kann auf inkompatible Definitionen der Hebemethode zurückzuführen sein

  2. Ich habe diesen Github-Thread durchgelesen

  3. Wenn ich eine andere Version von rxjs installieren muss, erklären Sie bitte, wie Sie die richtigen rxjs deinstallieren und installieren.

Edit1: Ich antworte hier möglicherweise etwas spät, erhalte aber auch nach Verwendung von Typoskript 2.3.4 oder rxjs 6 alpha immer noch den gleichen Fehler . Unten ist meine 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"
  }
}
Deepak S.
quelle
1
Eine kleine Klarstellung
Irf
Dies scheint in [email protected] behoben worden zu sein .

Antworten:

70

Gemäß dieser müssen Sie Typoskript 2.3.4 aktualisieren oder rxjs 6 alpha

Gehen Sie in die Datei your package.json in Ihrem Projektupdate Typoskript oder in der rxjs-Version. Beispiel

"typescript": "2.3.4"

machen npm install

Update (29.06.2017): -

Gemäß den Kommentaren "2.4.0"funktioniert Typoskript .

CharanRoot
quelle
6
"typescript": "^2.3.4"wird mit 2.4.1 übereinstimmen und 2.4 ist die Version, die das Problem mit RxJS aufdeckt.
Cartant
5
Die ersetzte Typoskriptversion auf "2.4.0" hat bei mir funktioniert.
Ajax
1
Ich zweitens, dass es genau "2.3.4" sein muss - "^ 2.3.4" hat bei mir nicht funktioniert.
Maia
1
Kombination von "typescript": "2.3.0"und "rxjs": "5.4.1"arbeitete für mich
ericdemo07
@Jonnysai Entschuldigung, ich nehme zurück, was ich gesagt habe. Projekt kompiliert, aber ich habe einen Laufzeitfehler erhalten und auf 2.3.4 heruntergestuft. Mehr hier: stackoverflow.com/a/44556137
Carcamano
25

Wie andere bereits betont haben, ist dieses Problem auf die in TypeScript 2.4 eingeführte strengere Typprüfung von Generika zurückzuführen. Dies stellte eine Inkonsistenz in einer RxJS-Typdefinition dar und wurde folglich in RxJS Version 5.4.2 behoben . Die ideale Lösung besteht also darin, einfach auf 5.4.2 zu aktualisieren.

Wenn Sie aus irgendeinem Grund kein Upgrade auf 5.4.2 durchführen können, sollten Sie stattdessen die Lösung von Alan Haddad verwenden, die Typdeklaration zu erweitern, um sie für Ihr eigenes Projekt zu beheben. Dh diesen Snippet zu deiner App hinzufügen:

// 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>;
  }
}

Seine Lösung hinterlässt keine weiteren Nebenwirkungen und ist daher großartig. Alternativ haben vorgeschlagene Lösungen mehr Nebenwirkungen für Ihre Projekteinrichtung und sind daher weniger ideal:

  • Deaktivieren Sie die strengeren generischen Prüfungen mit dem Compiler-Flag --noStrictGenericChecks . Dies macht es jedoch weniger streng für Ihre eigene App, was Sie tun können, führt jedoch möglicherweise inkonsistente Typdefinitionen ein, wie dies in dieser RxJS-Instanz der Fall war, was wiederum zu weiteren Fehlern in Ihrer App führen kann.
  • Überprüfen Sie die Typen in Bibliotheken nicht, wenn das Flag --skipLibCheck auf true gesetzt ist. Dies ist auch nicht ideal, da möglicherweise keine Typfehler gemeldet werden.
  • Upgrade auf RxJS 6 Alpha - Angesichts der wesentlichen Änderungen kann Ihre App auf schlecht dokumentierte Weise beschädigt werden, da sie immer noch in Alpha ist. Wenn Sie andere Abhängigkeiten wie Angular 2+ haben, ist dies möglicherweise keine wirklich unterstützte Option, da das Framework selbst jetzt oder später beschädigt wird. Was ich für ein noch schwieriger zu lösendes Problem halte.
Koslun
quelle
24

Ein zugelassener Band-Aid-Ansatz besteht darin, Ihrer tsconfig.json-Datei Folgendes hinzuzufügen, bis die RxJS-Mitarbeiter entscheiden, was sie bei Verwendung von TypeScript 2.4.1 gegen den Fehler tun möchten:

"compilerOptions": {

    "skipLibCheck": true,

 }
user3785010
quelle
Danke dafür, es hat funktioniert. Ich habe viele andere Dinge ausprobiert, aber ich denke, dieser Fehler hängt mit falschen Paketen zusammen, deren falsche Version sich nicht gegenseitig unterstützt ...
Salim
2
Ich denke, es ist keine gute Idee, All LibCheck zu deaktivieren oder zu unterdrücken.
CharanRoot
Ich schlug das gleiche in der Github-Frage vor
Sean Newell
@Jonnysai Da Sie diesen Code nicht besitzen, ist es kurzfristig in Ordnung, die lib-Prüfung zu unterdrücken, da Sie Probleme mit den Bibliotheken einreichen und dann Ihre eigene Entwicklungsarbeit fortsetzen können. Sie können Ihr eigenes Problem einreichen und einen Link zu ihrem Problem erstellen. Wenn die Typen behoben sind, können Sie die Unterdrückung entfernen.
Sean Newell
6
Die wirkliche Lösung sollte nicht sein skipLibCheck. Wenn Sie das tun, sind Sie möglicherweise über andere Probleme hinweg. Eine bessere Lösung ist, noStrictGenericChecksbis RxJS aktualisiert wird.
Daniel Rosenwasser
19

Sie können das Problem vorübergehend mithilfe der Modulerweiterung umgehen

Der folgende Code hat das Problem für mich behoben. Sobald RxJS eine stabile Version hat, die dieses Problem nicht aufweist, sollte sie entfernt werden.

// 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>;
  }
}

Während es vielleicht ironisch ist, dass RxJS selbst diese Technik so stark nutzt, um seine eigene Form zu beschreiben, ist sie tatsächlich allgemein auf eine Reihe von Problemen anwendbar.

Obwohl es sicherlich Grenzen und raue Kanten gibt, besteht ein Teil der Leistungsfähigkeit dieser Technik darin, dass wir sie verwenden können, um vorhandene Deklarationen zu verbessern und sie typsicherer zu machen, ohne die gesamte Datei zu verzweigen und zu pflegen.

Aluan Haddad
quelle
Wo fügen Sie diese Datei hinzu oder importieren sie?
Dave
1
Fügen Sie es an einer beliebigen Stelle in Ihrem Projekt hinzu, sodass es vom Compiler übernommen wird. Wenn Sie explizite Dateilisten verwenden, stellen Sie sicher, dass diese enthalten sind. Andernfalls sollte es automatisch abgeholt werden, solange es nicht über der Datei
tsconfig.json liegt
2
Ich habe es versucht, da es am wenigsten störend schien. Hat gut funktioniert.
Stephen Holt
1
Ich habe herausgefunden, wie man die Datei hinzufügt - "import 'rxjs / Subject';" (ohne "von" oder geschweifte Klammern) in app.component.ts.
John Pankowicz
1
@JaredWhipple Das ist ein ernstes Problem und hat weit mehr Auswirkungen als nur auf die Überprüfung von Texten. Sie können "paths"in verwenden, tsconfig.jsonum explizit anzugeben, wo "rxjs"und "rxjs/*"für die Typüberprüfung aufgelöst werden soll. Das Vorhandensein mehrerer Versionen kann jedoch zu Laufzeitproblemen führen. Selbst wenn Sie keine instanceofanderen Tests verwenden, sind Ihre Deps möglicherweise weniger prinzipiell. Am besten öffnen Sie ein Problem mit videogular2 und schlagen vor, RxJS in eine Peer-Abhängigkeit zu ändern.
Aluan Haddad
9
"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", und " typescript ": "^ 2.3.4", dann funktioniert npm install und ng .

Ketan Chaudhari
quelle
8

Nur ein bisschen Detail, um meine zwei Cent einzubringen.

Das Problem tritt auf, wenn wir Typescript auf die neueste Version aktualisieren , die inzwischen TypeScript 2.4.1 war ("wie wir die Upgrades lieben :) "], und wie von @ Jonnysai in seiner Antwort und dem dort bereitgestellten Link erwähnt eine ausführliche Diskussion über das Problem und seine Korrekturen.

Also, was war für mich war:
1. Ich musste Un installieren 2.4.1 Typoskript zuerst, indem Sie in der Systemsteuerung > Programme und Funktionen ...
2. Installieren, neu, Typoskript 2.4.0 , und vergewissern Sie sich , in package.jsonDatei haben Sie diese Konfiguration, wie hier in einem etwas kürzeren Detail erwähnt. Sie können herunterladen Typoskript 2.4.0 von hier , für Visual Studio 2015

Geben Sie hier die Bildbeschreibung ein


Irf
quelle
Dies funktionierte sehr einfach ohne "Problemumgehungen". Ich bin mir nicht sicher, ob dies wichtig ist, aber mein RXJ war "5.0.1" und ich habe das nicht geändert, aber alles scheint in Ordnung zu sein. Danke für deine zwei Cent - es hat mir geholfen!
Tom A
Ich habe auch dieses Problem mit Typescript 2.3.4. Es scheint also nicht richtig zu sein, dass das Problem durch ein Upgrade auf 2.4.1 entsteht. Das aktuelle Angular-Cli installiert 2.3.4, da es angibt, dass <2.4.0 erforderlich ist.
John Pankowicz
5

Sie können die vorübergehend verwenden --noStrictGenericChecks Flag , um dies in TypeScript 2.4 zu umgehen.

Dies ist --noStrictGenericChecksin der Befehlszeile oder nur "noStrictGenericChecks": trueim "compilerOptions"Feld intsconfig.json .

Beachten Sie, dass dies bei RxJS 6 korrigiert wird.

Siehe diese ähnliche Frage: Wie kann ich diesen Fehler in RxJS 5.x in TypeScript 2.4 umgehen?

Daniel Rosenwasser
quelle
Wo setzen Sie die Flagge?
Dave
3

Bitte ändern Sie die folgende Subject.d.tsDatei:

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

zu:

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

Der Rückgabetyp sollte wahrscheinlich Observable<R>eher als seinObservable<T>

Massimiliano Kraus
quelle
3

Behalten Sie die Option noStrictGeneric in der Datei tsconfig.config bei

{
    "compilerOptions": {
        "noStrictGenericChecks": true
    }
}
Jigar Tanna
quelle
3

Fügen Sie "noStrictGenericChecks": true in der Datei tsconfig.json unter dem Knoten "compilerOptions" hinzu , wie in der folgenden Abbildung gezeigt. Ich habe den gleichen Fehler festgestellt, nachdem dieser Fehler behoben wurde. Geben Sie hier die Bildbeschreibung ein

Akshay Bagi
quelle
2

Ich habe das gleiche Problem gefunden und es gelöst, indem ich "rxjs": "5.4.1" , "typescript": "~ 2.4.0" verwendet und "noStrictGenericChecks": true in tsconfig.json hinzugefügt habe.

Khachornchit Songsaen
quelle
1

In RxJS 6 wird dies behoben, aber als vorübergehende Problemumgehung können Sie die noStrictGenericChecksCompileroption verwenden.

In tsconfig.json, steckte es in compilerOptionsund setzen Sie ihn auf true.

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

In der Kommandozeile ist es --noStrictGenericChecks.

Warum es passiert:

TypeScript 2.4 hat eine Änderung der Strenge, und der Betreff hebt nicht zum richtigen Observable. Die Unterschrift hätte wirklich sein sollen

(Operator: Operator) => Beobachtbar

Dies wird in RxJS 6 behoben.

Suresh Mediboyina
quelle
1

Gehen Sie zur Datei Package.json und ändern Sie die folgende Konfiguration

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

Es wird klappen

Rahul Sharma
quelle
0

Die alleinige Verwendung hat jedoch nicht geholfen, wenn der folgende Ansatz verwendet wurde: Wie komme ich um diesen Fehler "Betreff erweitert Observable falsch" in TypeScript 2.4 und RxJs 5 herum?

löste die Probleme. Dort wird auch erwähnt, dass das Problem in RxJs 6 behoben wurde. Dies ist also eher eine vorübergehende Korrektur, die mir geholfen hat, dieses großartige Beispiel (das zuvor kompiliert wurde, aber den Fehler während der Ladezeit verursachte) erfolgreich auszuführen: Angular 4-Anwendungsentwicklung mit Bootstrap 4 und TypeScript

Gil Shapir
quelle
0

Neuinstallation von rxjs -> npm installiere rxjs @ 6 rxjs-compatible @ 6 --save

Yakup Ad
quelle
0

Jetzt brauchen wir das ionisch-native Modul nicht mehr - wir brauchen nur noch @ ionic-native / core. Lauf

npm uninstall ionic-native --save

Es wird Ihr Problem lösen ..

Shubham Pandey
quelle
0

einfach hinzufügen

"noStrictGenericChecks": true

zu Ihrer tsconfig.json

Miguel Afonso
quelle
0

danke der Antwort von zmag und Rahul Sharma, es funktioniert! @zmag @Rahul Sharma

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

Mein Problem ist wie folgt:

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

Nehmen Sie Änderungen vor als.

Gehen Sie zur Datei Package.json und ändern Sie die folgende Konfiguration

  "rxjs": "5.4.1",
  "typescript": "~2.4.0"
SageX
quelle
-3

Ja, das Problem war mit TypeScript 2.4.1. Ich habe dies gerade über die Systemsteuerung deinstalliert und es funktioniert für mich, da Visual Studio 2017 dies bereits hat.

Subhash Sharma
quelle