Error de rxjs / Subject.d.ts: la clase 'Subject <T>' extiende incorrectamente la clase base 'Observable <T>'

89

Extraje un código de plantilla de muestra de este tutorial e hice los siguientes dos pasos para comenzar:

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

  2. npm start // falló con el siguiente 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

Veo que en el asunto. Su declaración de elevación es la siguiente:

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

Y en Observable.ts se define a continuación:

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

Nota: - 1. Soy nuevo en Angular2 y estoy tratando de conseguir cosas.

  1. El error puede deberse a definiciones incompatibles del método de elevación.

  2. Leí este hilo de github

  3. Si necesito instalar alguna versión diferente de rxjs, indíquenos cómo desinstalar e instalar los rxjs correctos.

Edit1: Puede que tarde un poco en responder aquí, pero sigo recibiendo el mismo error incluso después de usar mecanografiado 2.3.4 o rxjs 6 alpha . A continuación se muestra mi 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"
  }
}
angular  typescript  rxjs 
— Deepak S
fuente
3
— cartant
1
— Irfaan
Esto parece haberse solucionado en rxjs@5.4.2 .

Respuestas:

70

Según esto , necesita actualizar mecanografiado 2.3.4 o rxjs 6 alpha

vaya al archivo package.json en la versión de mecanografiado o rxjs de actualización de su proyecto. Ejemplo

"typescript": "2.3.4"

hacer npm install

actualización (29/06/2017): -

Según los comentarios de "2.4.0"trabajo mecanografiado .

— CharanRoot
fuente
6
"typescript": "^2.3.4"coincidirá con 2.4.1 y 2.4 es la versión que expone el problema con RxJS.
— cartant
5
La versión de mecanografiado reemplazada a "2.4.0" funcionó para mí.
— Ajax
1
Segundo que tiene que ser exactamente "2.3.4" - "^ 2.3.4" no funcionó para mí.
— maia
1
combinación de "typescript": "2.3.0"y "rxjs": "5.4.1"funcionó para mí
— ericdemo07
@Jonnysai lo siento, retiro lo que dije. Proyecto compilado, pero obtuve un error de tiempo de ejecución y bajé a 2.3.4. Más aquí: stackoverflow.com/a/44556137
— Carcamano
25

Como otros han señalado, este problema surgió como consecuencia de la comprobación de tipo más estricta de los genéricos introducida en TypeScript 2.4. Esto expuso una inconsistencia en una definición de tipo RxJS y, en consecuencia, se corrigió en la versión 5.4.2 de RxJS . Entonces, la solución ideal es simplemente actualizar a 5.4.2.

Si por alguna razón no puede actualizar a 5.4.2, debería usar la solución de Alan Haddad de aumentar la declaración de tipo para arreglarlo para su propio proyecto. Es decir, agregue este fragmento a su aplicación:

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

Su solución no dejará otros efectos secundarios y, por lo tanto, es excelente. Alternativamente, las soluciones propuestas tienen más efectos secundarios para la configuración de su proyecto y, por lo tanto, son menos ideales:

  • desactive las comprobaciones genéricas más estrictas con la bandera del compilador --noStrictGenericChecks. Sin embargo, esto hará que sea menos estricto para su propia aplicación, lo que puede hacer, pero podría introducir definiciones de tipo inconsistentes como lo hizo en esta instancia de RxJS, lo que a su vez podría introducir más errores en su aplicación.
  • No verificando los tipos en bibliotecas con el indicador --skipLibCheck establecido en verdadero. Esto tampoco es ideal, ya que es posible que no se informen algunos errores de tipo.
  • Actualización a RxJS 6 Alpha: dado que hay cambios importantes, esto podría dañar su aplicación de formas mal documentadas, ya que todavía está en alfa. Además, si tiene otras dependencias como Angular 2+, esta podría no ser una opción compatible, rompiendo el marco en sí ahora o en el futuro. Lo que creo que es un problema aún más difícil de resolver.
— Koslun
fuente
24

Un enfoque de curita admitido es agregar lo siguiente a su archivo tsconfig.json hasta que la gente de RxJS decida qué quieren hacer con el error al usar TypeScript 2.4.1:

"compilerOptions": {

    "skipLibCheck": true,

 }
— usuario3785010
fuente
Gracias por esto, funcionó. Probé muchas otras cosas, pero supongo que este error está relacionado con paquetes incorrectos con una versión incorrecta que no se admiten entre sí ...
— Salim
2
Creo que no es una buena idea desactivar o suprimir All LibCheck.
— CharanRoot
Sugerí lo mismo sobre el problema de github
— Sean Newell
@Jonnysai, dado que no posee ese código, suprimir la verificación de bibliotecas está bien a corto plazo, ya que puede presentar problemas con las bibliotecas y luego continuar con su propio trabajo de desarrollo. Puede presentar su propio problema y vincularlo a su problema, y ​​cuando se solucionen sus tipos, puede eliminar la supresión.
— Sean Newell
6
La verdadera solución no debería ser skipLibCheck. Si está haciendo eso, posiblemente esté pasando por alto otros problemas. Una mejor solución es noStrictGenericCheckshasta que se actualice RxJS.
— Daniel Rosenwasser
19

Puede solucionar temporalmente el problema mediante el aumento de módulos

El siguiente código resolvió el problema por mí. Una vez que RxJS tenga una versión estable que no presente este problema, debería eliminarse.

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

Si bien es quizás irónico que el propio RxJS haga un uso tan intensivo de esta técnica para describir su propia forma, en realidad es generalmente aplicable a una serie de problemas.

Si bien ciertamente existen límites y asperezas, parte de lo que hace que esta técnica sea poderosa es que podemos usarla para mejorar las declaraciones existentes, haciéndolas más seguras sin bifurcar y mantener todo el archivo.

— Aluan Haddad
fuente
¿Dónde agrega o importa este archivo?
— Dave
1
agréguelo en cualquier parte de su proyecto de modo que el compilador lo recoja. Si está utilizando listas de archivos explícitas, asegúrese de que esté incluido. De lo contrario, debería recogerse automáticamente siempre que no esté por encima del archivo
— tsconfig.json
2
Intenté esto, ya que parecía lo menos perturbador que podía hacer. Funcionó bien.
— Stephen Holt
1
Descubrí cómo agregar el archivo - "import 'rxjs / Subject';" (sin el "from" o llaves) en app.component.ts.
— John Pankowicz
1
@JaredWhipple Ese es un problema serio y tiene implicaciones para mucho más que la verificación de tipos. Puede usar "paths"in tsconfig.jsonpara especificar explícitamente dónde "rxjs"y "rxjs/*"debe resolverse para la verificación de tipos. Sin embargo, es probable que tener varias versiones cause problemas de ejecución. Incluso si no usa instanceofotras pruebas similares, sus departamentos pueden tener menos principios. Lo mejor que puede hacer es abrir un problema con videogular2 que sugiere cambiar RxJS a una dependencia de pares.
— 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"
}

en package.json "rxjs": "^5.4.2", y "typescript": "^ 2.3.4", luego npm install y ng sirven para que funcione.

— Ketan Chaudhari
fuente
8

Solo un poco de detalle, en un intento de poner mi granito de arena.

El problema surge cuando actualizamos TypeScript a la última versión, que ahora era TypeScript 2.4.1 , ["ya que nos encantan las actualizaciones :) "], y como lo menciona @ Jonnysai en su respuesta y el enlace que se proporciona allí, hay una discusión detallada sobre el problema y sus soluciones.

Por lo tanto, lo que trabajó para mí era:
1. Tenía que Un instale mecanografiado 2.4.1 En primer lugar, al ir a Panel de control > Programas y características ...
2. Instalar, de nuevo, mecanografiado 2.4.0 , y luego asegurarse, en package.jsonarchivo, tiene esta configuración, como se menciona aquí en un detalle más breve. Puede descargar TypeScript 2.4.0 desde aquí , para Visual Studio 2015

ingrese la descripción de la imagen aquí


— Irfaan
fuente
Esto funcionó de manera muy simple y sin "soluciones". No estoy seguro de que esto importe, pero mi rxjs era "5.0.1" y no lo cambié, aunque todo parece estar bien. Gracias por sus dos centavos, ¡me ayudó!
— Tom A
También tengo este problema al usar TypeScript 2.3.4. Por lo tanto, no parece correcto que el problema surja debido a la actualización a 2.4.1. El angular-cli actual instala 2.3.4 porque dice que requiere <2.4.0.
— John Pankowicz
3

Cambie la siguiente línea de Subject.d.tsarchivo:

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

a:

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

El tipo de retorno probablemente debería ser en Observable<R>lugar deObservable<T>

— Massimiliano Kraus
fuente
3

Mantenga la opción noStrictGeneric verdadera en el archivo tsconfig.config 

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

Agregue "noStrictGenericChecks": verdadero en el archivo tsconfig.json en el nodo "compilerOptions" como se muestra en la imagen de abajo y compile la aplicación. Me he enfrentado al mismo error después de agregar este error resuelto. ingrese la descripción de la imagen aquí

— Akshay Bagi
fuente
2

Encontré el mismo problema y lo resolví usando "rxjs": "5.4.1" , "mecanografiado": "~ 2.4.0" y agregando "noStrictGenericChecks": true en tsconfig.json.

— Khachornchit Songsaen
fuente
1

RxJS 6 tendrá esto fijo, pero como solución temporal, puede usar la noStrictGenericChecksopción del compilador.

En tsconfig.json, compilerOptionscolóquelo y configúrelo en verdadero.

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

En la línea de comando está --noStrictGenericChecks.

Por qué está sucediendo:

TypeScript 2.4 tiene un cambio de rigor y el sujeto no se eleva al Observable correcto. La firma realmente debería haber sido

(operador: Operador) => Observable

Esto se solucionará en RxJS 6.

— Suresh Mediboyina
fuente
1

Vaya al archivo Package.json y modifique la siguiente configuración

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

Funcionará

— Rahul Sharma
fuente
0

Sin embargo, usar lo anterior solo no ayudó, usar el siguiente enfoque: ¿Cómo puedo evitar este error de "El sujeto extiende incorrectamente observable" en TypeScript 2.4 y RxJs 5

resuelto los problemas. También se menciona allí que el problema se ha solucionado en RxJs 6, por lo que esta es más una solución temporal, que me ayudó a ejecutar con éxito este gran ejemplo (que se compiló antes pero dio el error durante el tiempo de carga): Desarrollo de la aplicación Angular 4 con Bootstrap 4 y TypeScript

— Gil Shapir
fuente
0

Ahora no necesitamos el módulo iónico-nativo, solo necesitamos @ ionic-native / core. correr

npm uninstall ionic-native --save

Resolverá su problema ...

— Shubham Pandey
fuente
0

gracias la respuesta de zmag y Rahul Sharma, ¡funciona! @zmag @Rahul Sharma

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

mi problema es el siguiente:

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

Realice cambios como.

Vaya al archivo Package.json y modifique la siguiente configuración

  "rxjs": "5.4.1",
  "typescript": "~2.4.0"
— SageX
fuente
-3

Sí, el problema fue con TypeScript 2.4.1. Acabo de desinstalar esto del Panel de control y funciona para mí, ya que Visual Studio 2017 ya lo tiene.

— Subhash Sharma
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.