web-dev-qa-db-fra.com

erreur rxjs/Subject.d.ts: la classe 'Subject <T>' étend incorrectement la classe de base 'Observable <T>'

J'ai extrait un exemple de code de modèle à partir de ce tutoriel et ci-dessous deux étapes pour commencer - 

  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 subject.d.ts la déclaration d'ascenseur est comme ci-dessous -

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

Et dans Observable.ts, il est défini comme suit:

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

Note 1. Je suis nouveau sur Angular2 et j'essaie de mettre la main dessus.

  1. L'erreur peut être due à des définitions incompatibles de la méthode de levage

  2. J'ai lu ce fil github

  3. Si j'ai besoin d'installer une version différente de rxjs, dites-nous comment désinstaller et installer le bon rxjs.

_/Edit1: Je suis peut-être un peu en retard pour répondre ici, mais je reçois toujours la même erreur même après avoir utilisé TypeScript 2.3.4 ou rxjs 6 alpha Ci-dessous mon 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"
  }
}
angulartypescriptrxjs
89
Deepak S

Selon this vous avez besoin de mettre à jour TypeScript 2.3.4 ou rxjs 6 alpha

accédez au fichier package.json dans la mise à jour de votre projet TypeScript ou version Rxjs . Exemple

"TypeScript": "2.3.4"

faire npm install 

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

Selon les commentaires TypeScript "2.4.0" travail.

69
CharanRoot

Comme d'autres l'ont souligné, ce problème est une conséquence de la vérification de type plus stricte des génériques introduite dans TypeScript 2.4. Cela exposait une incohérence dans une définition de type RxJS et a donc été corrigé dans RxJS version 5.4.2 . La solution idéale est donc simplement de passer à la version 5.4.2.

Si, pour une raison quelconque, vous ne pouvez pas effectuer la mise à niveau vers la version 5.4.2, vous devriez plutôt utiliser la solution d'Alan Haddad consistant à augmenter la déclaration de type pour la corriger pour votre propre projet. C'est à dire. ajoutez cet extrait à 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 ne laissera aucun autre effet secondaire et est donc géniale. Les solutions proposées alternativement ont plus d'effets secondaires pour la configuration de votre projet et sont donc moins idéales:

  • désactiver les contrôles génériques plus stricts avec l'indicateur de compilation --noStrictGenericChecks. Cela le rendra toutefois moins strict pour votre propre application, ce que vous pouvez faire, mais peut introduire des définitions de type incohérentes, comme cela a été le cas dans cette instance RxJS, ce qui pourrait à son tour introduire davantage de bogues dans votre application.
  • Ne vérifie pas les types dans les bibliothèques avec flag --skipLibCheck défini sur true. Ce n’est pas idéal non plus, car il est possible que certaines erreurs de type ne soient pas signalées.
  • Mise à niveau vers RxJS 6 Alpha - Compte tenu des changements importants, votre application pourrait être mal documentée, car elle est toujours en alpha. De plus, si vous avez d'autres dépendances telles que Angular 2+, il se peut que cette option ne soit pas réellement prise en charge, car le framework lui-même serait cassé maintenant ou plus tard. Ce qui, à mon avis, est un problème encore plus difficile à résoudre.
24
Koslun

Une approche 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,

 }
23
user3785010

Vous pouvez temporairement contourner le problème en utilisant Extension du module

Le code suivant a résolu le problème pour moi. Une fois que RxJS a une version stable qui ne présente pas ce problème, vous devez la supprimer.

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

Il est peut-être ironique que RxJS utilise elle-même cette technique de manière aussi intensive pour décrire sa propre forme, mais elle s’applique généralement à un grand nombre de problèmes.

Il existe certes des limites et des limites, mais cette technique est particulièrement puissante parce qu’elle peut être utilisée pour améliorer les déclarations existantes en les rendant plus sûres en caractères typographiques sans archivage ni maintenance.

19
Aluan Haddad
"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", then npm install et ng serve son fonctionnement.

8
ketan chaudhari

Vous pouvez utiliser temporairement l'indicateur --noStrictGenericChecks pour contourner ce problème dans TypeScript 2.4.

C'est --noStrictGenericChecks sur la ligne de commande, ou juste "noStrictGenericChecks": true dans le champ "compilerOptions" dans tsconfig.json.

N'oubliez pas que RxJS 6 corrigera ce problème.

Voir cette question similaire: Comment puis-je contourner cette erreur dans RxJS 5.x dans TypeScript 2.4?

5
Daniel Rosenwasser

Conservez l'option noStrictGeneric à la valeur true dans le fichier tsconfig.config. 

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

Veuillez modifier la ligne suivante du fichier Subject.d.ts:

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

à:

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

Le type de retour devrait probablement être Observable<R> plutôt que Observable<T>

3
user8709803

Ajoutez "noStrictGenericChecks": true dans le fichier tsconfig.json sous le nœud "compilerOptions", comme indiqué dans l'image ci-dessous et dans l'application de génération. J'ai fait face à la même erreur après avoir ajouté cette erreur résolue .  enter image description here

2
Akshay Bagi

J'ai rencontré le même problème et je l'ai résolu avec "rxjs": "5.4.1" , "TypeScript": "~ 2.4.0" et en ajoutant "noStrictGenericChecks": true into tsconfig.json.

2
John Pluto Solutions

RxJS 6 corrigera ce problème, mais vous pouvez utiliser l’option noStrictGenericChecks du compilateur comme solution temporaire.

Dans tsconfig.json, mettez-le dans compilerOptions et définissez-le sur true.

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

Sur la ligne de commande, il s'agit de --noStrictGenericChecks.

Pourquoi ça se passe:

TypeScript 2.4 a un changement de rigueur, et le sujet n'élève pas l'observable correct. La signature aurait vraiment dû être

(opérateur: opérateur) => observable

Cela sera corrigé dans RxJS 6.

1
Suresh Mediboyina

il suffit d'ajouter

"noStrictGenericChecks": true

à votre tsconfig.json

0
Miguel Afonso

Cependant, l’utilisation de ce qui précède n’a pas aidé, en utilisant l’approche suivante: Comment puis-je contourner cette erreur «Le sujet étend incorrectement Observable» dans TypeScript 2.4 et RxJs 5

résolu les problèmes. Il est également mentionné ici que le problème a été corrigé dans RxJs 6; il s'agit donc d'un correctif temporaire, ce qui m'a aidé à exécuter avec succès ce bel exemple (qui compilait auparavant mais donnait l'erreur au moment du chargement): Développement d'applications angulaires 4 avec Bootstrap 4 et TypeScript

0
Gil Shapir

Maintenant, nous n’avons plus besoin du module ionic-native, nous avons seulement besoin de @ ionic-native/core .

npm uninstall ionic-native --save

Cela résoudra votre problème ..

0
Shubham Pandey

réinstaller rxjs -> npm installer rxjs @ 6 rxjs-compat @ 6 --save

0
Yakup Ad