Erreur rxjs / Subject.d.ts: sujet de la classe <T> 'extension incorrecte de la classe de base' Observable <T> '

Question

J'en ai extrait l'exemple de modèle de code de ce tutoriel et fait ci-dessous deux étapes -

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

2. npm start // a échoué avec l'erreur ci-dessous-

   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
   

Je vois que dans le sujet.d.ts déclaration de l'ascenseur est comme ci-dessous -

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

Et Observables.ts il est défini comme ci-dessous-

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

Remarque:- 1. Je suis nouveau sur Angular2 et en essayant de se procurer des choses.

2. L'erreur peut être dû à une incompatibilité des définitions de la méthode de remontée

3. J'ai lu ce fil github

4. Si j'ai besoin d'installer une version différente de rxjs alors s'il vous plaît dire à la façon de désinstaller et installer la bonne rxjs.

Edit1: Je suis peut-être un peu en retard dans la réponse ici, mais j'obtiens toujours la même erreur, même après l'utilisation de la machine 2.3.4 ou rxjs 6 alpha. Ci-dessous est mon colis.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

Selon ce que vous avez besoin de mise à jour typescript 2.3.4 ou rxjs 6 alpha

Accédez au fichier votre package.json dans la version de votre projet de mise à jour dactylographe ou rxjs Exemple

 "typescript": "2.3.4"
 

faire npm install

mise à jour (29/06/2017): -

Selon les commentaires typographiques "2.4.0" travail.

Answer 2

Comme d'autres l'ont souligné ce problème est une conséquence de la plus stricte vérification du type de génériques introduit dans la Machine 2.4. Cet exposé une incohérence dans un RxJS de la définition de type et a par conséquent fixé dans RxJS version 5.4.2. Donc, la solution idéale est de le mettre à niveau à l'article 5.4.2.

Si vous pour une raison quelconque ne peuvent pas passer à 5.4.2 vous devez utiliser à la place d'Alan Haddad est solution de l'augmentation de la déclaration de type de le fixer pour votre propre projet. I. e. ajouter ce morceau de code dans votre application:

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

Sa solution laissera pas d'autres effets secondaires et est donc d'une grande. Sinon, les solutions proposées ont plus d'effets secondaires pour votre projet d'installation et sont donc moins idéal:

• désactiver les plus strictes générique vérifie avec le compilateur drapeau --noStrictGenericChecks. Ce sera toutefois la rendre moins stricte pour votre propre application, que vous pouvez faire, mais peut introduire incompatible définitions de type, comme il l'a fait dans cette RxJS instance, qui à son tour peut introduire plus de bugs dans votre application.
• Ne pas vérifier les types de bibliothèques avec le drapeau --skipLibCheck définie sur true. Ce n'est pas l'idéal, soit que vous ne pourriez pas obtenir un certain type d'erreurs signalées.
• La mise à niveau vers RxJS 6 Alpha - étant donné qu'il y a des modifications importantes de ce qui pourrait briser votre application dans mal documenté façons, vu comme c'est encore en alpha. De plus, si vous avez d'autres dépendances comme Angulaire 2+ cela ne peut pas vraiment être pris en charge, brisant le cadre lui-même est maintenant ou en bas de la ligne. Je pense que c'est encore plus difficile à problème à résoudre.

Answer 3

Une méthode de correction admise consiste à ajouter ce qui suit à votre fichier tsconfig.json jusqu'à ce que les utilisateurs de RxJS décident ce qu'ils veulent faire à propos de l'erreur lorsqu'ils utilisent TypeScript 2.4.1:

 "compilerOptions": {

    "skipLibCheck": true,

 }
 

Answer 4

Vous pouvez contourner le problème en utilisant le Module d'Augmentation de

Le code suivant résolu le problème pour moi. Une fois RxJS a une version stable qui ne présentent pas ce problème, il doit être supprimé.

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

Alors qu'il est peut-être ironique que RxJS lui-même fait de cette forte utilisation de cette technique pour décrire sa propre forme, il est en fait généralement applicables à un ensemble de problèmes.

Bien qu'il existe certainement des limites et les bords rugueux, une partie de ce qui rend cette technique puissante, c'est que nous pouvons l'utiliser pour améliorer déclarations existantes en les rendant plus sécurisée de type sans fork et de maintenir l'intégralité du fichier.

Answer 5

 "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"
}
 

dans package.json "rxjs": "^5.4.2", et "typescript": "^ 2.3.4", puis npm install et ng servent son fonctionnement.