¿Cómo puedo evitar este error "El sujeto extiende incorrectamente el Observable" en TypeScript 2.4 y RxJS 5.x?

rxjs5 typescript2.4

Question

Cuando compilo, obtengo el siguiente error de compilación en los archivos de declaración de RxJS:

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 ''<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''.

¿Qué está pasando aquí, y cómo soluciono esto sin degradar a TypeScript 2.3 o anterior?

Answer 1

Solución

RxJS 5.4.2 ahora debería funcionar perfectamente con TypeScript 2.4.1. Simplemente actualice a 5.4.2+ si es posible.

npm install --save rxjs@^5.4.2

Si no, la siguiente solución debería funcionar.

Solución alternativa

Las versiones más nuevas de RxJS tendrán esto solucionado, pero como una solución temporal, puede usar la opción del compilador noStrictGenericChecks .

En tsconfig.json , póngalo en "compilerOptions" y tsconfig.json en true .

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

En la línea de comandos, es --noStrictGenericChecks .

Por qué está sucediendo

TypeScript 2.4 tiene un cambio de rigor, y el Subject<T> no se levanta al Observable correcto. La firma realmente debería haber sido

<R>(operator: Operator<T, R>) => Observable<R>

Esto se solucionará en RxJS 6.

Answer 2

Añadir

"noStrictGenericChecks": true

en el archivo tsconfig.json

Answer 3

En su clase de Sujeto:

cambiar esta línea:

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

a :

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

Answer 4

Este es un problema de desajuste entre rxjs y typscript, usando "rxjs": "5.4.2" y "mecanografiado": "~ 2.3.4" funciona para mí

Answer 5

He hecho los siguientes dos cambios en el archivo package.json.

1) cambió la versión de rxjs a 5.4.1 en la sección de dependencias.

"dependencias": {
"rxjs": "5.4.1"}

2) cambió la versión de mecanografiado a 2.4.0 en la sección devDependencias.

"devDependencies": {"typescript": "2.4.0"}

Ejecuté el comando '' npm install '' después de hacer los dos cambios y funcionó.

Answer 6

He realizado los cambios a continuación en el archivo package.json.

 "dependencies": {
    "@angular/animations": "4.1.3",
    "@angular/common": "4.4.6",
    "@angular/compiler": "4.4.6",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "4.4.6",
    "@angular/forms": "4.4.6",
    "@angular/http": "4.4.6",
    "@angular/platform-browser": "4.4.6",
    "@angular/platform-browser-dynamic": "4.4.6",
    "@angular/platform-server": "4.4.6",
    "@angular/router": "4.4.6",
    "@ionic/storage": "2.0.0",
    "cordova-plugin-console": "1.0.5",
    "cordova-plugin-device": "1.1.4",
    "cordova-plugin-splashscreen": "~4.0.1",
    "cordova-plugin-statusbar": "2.2.1",
    "cordova-plugin-whitelist": "1.3.1",
    "ionic-angular": "2.2.0",
    "ionic-native": "2.4.1",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionic-tooltips": "^2.0.0",
    "ionicons": "3.0.0",
    "rxjs": "^5.4.2",
    "sw-toolbox": "3.4.0",
    "typescript": "2.4.0",
    "zone.js": "0.7.2"
  }

Cambios en rxjs y versión mecanografiada.

Answer 7

Hoy, enfrentó este error y lo resolvió prácticamente con los siguientes tres pasos. Entonces, compartir lo mismo con la esperanza, ayudará a otros.

Paso 1: en el archivo package.json, cambie la entrada como "rxjs": "5.4.2",

Paso 2: elimine la carpeta node_modules del proyecto, que está presente en el directorio raíz

Paso 3: Ahora, haga clic con el botón derecho en el archivo package.json y haga clic en restaurar como se muestra a continuación:

Nota: Nuevamente creará la carpeta node_module con los nuevos archivos. Ahora construye la solución, con suerte no deberías obtener ningún error de construcción relacionado con el problema anterior.