typescript - dev - ''Observable<T>'' no es una clase derivada de ''Observable<T>''

rxjs firebaseapp

Question

Al intentar ampliar una clase de una clase en un node_modules el compilador de node_modules mecanografía un error que dice:

Property ''source'' is protected but type ''Observable<T>'' is not a class derived from ''Observable<T>''.

Esto solo ocurre cuando la clase base es de un node_module .

La clase base se ve así:

import {Observable} from "rxjs/Observable";
export abstract class TestBase<T> {

    request(options: any):Observable<T> {
        return Observable.throw(new Error(''TestBase is abstract class. Extend it and implement own request method''));
    }
}

Subclasificarlo en un proyecto:

import {Observable} from "rxjs/Observable";
import {TestBase} from "@org/core";

class SocketResponse {

}

class Socket {
    request(): Observable<SocketResponse> {
        return new Observable.of(new SocketResponse());
    }
}

export class Sub extends TestBase<SocketResponse> {
    request(options:any):Observable<SocketResponse> {
        return new Socket().request();
    }
}

Si la clase base ( TestBase ) se mueve del node_module al proyecto mismo y cambia la importación para que parezca import {TestBase} from "./base"; El error desaparece

¿Esto se debe a que las compilaciones crean los tipos en diferentes ámbitos para cada módulo? Estoy completamente perdido aquí.

Actualizar:

Esto parece suceder solo cuando se vinculan los node_modules con el npm link . Parece que una solución posible para el momento es devolver un tipo en la clase base para devolver una interfaz.

Más información se puede encontrar aquí:

https://github.com/Microsoft/TypeScript/issues/6496

https://github.com/ReactiveX/rxjs/issues/1744

Answer 1

Después de listar los módulos de rxjs:

npm list rxjs

+ - @ angular / cli @ 1.6.6 | + - @ angular-devkit / core @ 0.0.29 | | -- [email protected] | +-- @angular-devkit/[email protected] | | - [email protected] | -- [email protected] - [email protected]

Puedes ver 2 versiones del mismo módulo. Mi proyecto requirió una versión más baja de rxjs, y por ejemplo anglular / cli requirió una versión más alta de rxjs.

No causó ningún problema antes, pero de repente todos los proyectos con las mismas dependencias lanzaban los mismos errores TS90010, por ejemplo:

ERROR en [cargador] ./src/main/webapp/app/admin/user-management/user-management-detail.component.ts:23:9 TS90010: tipo ''Suscripción'' no es asignable para escribir ''Suscripción'' . Existen dos tipos diferentes con este nombre, pero no están relacionados.

La propiedad ''_parent'' está protegida, pero el tipo ''Suscripción'' no es una clase derivada de ''Suscripción''.

Finalmente actualicé la versión de mecanografiado en package.json de 2.6.2 a 2.9.2 y desaparecieron todos los errores.

Answer 2

El problema ocurrirá solo cuando hagas un enlace npm.

Agregue rutas a compilerOptions del tsconfig.json del proyecto del cliente

"paths": { "rxjs/*": ["../node_modules/rxjs/*"]}

Esto debería funcionar ya que especificará la ruta desde la dependencia de rxjs.

Answer 3

En realidad, este problema puede deberse a su cambio de versión mecanografiada

intenta cambiar tu versión de mecanografiado

1. Puedes encontrar eso en

   package.json

establecido en 2.4.3

2. si no funciona entonces simplemente intente cli

   npm unlink typescript

   npm install [email protected]

y después de la instalación complete packages.json

Por favor compruebe que debería ser trabajo en dependencias

"dependencias": {
"@ angular / animations": "^ 5.2.0",
"@ angular / common": "^ 5.2.0",
"@ angular / compilador": "^ 5.2.0",
"@ angular / core": "^ 5.2.0",
"@ angular / forms": "^ 5.2.0",
"@ angular / http": "^ 5.2.0",
"@ angular / platform-browser": "^ 5.2.0",
"@ angular / platform-browser-dynamic": "^ 5.2.0",
"@ angular / enrutador": "^ 5.2.0",
"core-js": "^ 2.4.1",
"rxjs": "5.4.3",
"mecanografiado": "^ 2.3.4", << --------------- eliminar ^
"zone.js": "^ 0.8.19"

pero una cosa está clara, no es un error, esto se debe al cambio en el medio ambiente

si todavía enfrenta un problema, intente reinstalar el módulo de nodo

buena suerte.......

Answer 4

Estaba recibiendo un error loco como

Type ''Observable<MessageEvent>'' cannot be converted to type ''Observable<MessageEvent>''
Property ''source'' is protected but type ''Observable<T>'' is not a class derived from ''Observable<T>''

Y el motivo fue el npm link (en realidad npm i ../other-project pero es casi lo mismo).

Mi solución fue un poco trampa:

(stream as any as Observable<MessageEvent>)

LOL

Answer 5

Me encontré con un problema muy similar al desarrollar un módulo personalizado para un proyecto. No estoy 100% seguro de que tuviéramos el mismo problema, pero parece bastante cercano.

Cómo resolví mi problema

Sugeriría eliminar su carpeta node_modules y reinstalar todas sus dependencias.

rm -rf node_modules/
npm cache clean
npm install

Eso lo resolvió para mí.

Cuál fue el problema (creo)

El módulo que estaba desarrollando tenía una clase abstracta que el proyecto principal intentaba extender. Sin embargo, al intentar compilar el proyecto principal, el compilador arrojaría el mismo error que está obteniendo.

Después de investigar un poco, noté que NPM se quejaba de una UNMET PEER DEPENDENCY al instalar mi módulo en mi proyecto. Al mirar dentro de los node_modules del proyecto, noté que mi módulo tenía otra carpeta node_modules anidada dentro de ella con algunas dependencias que compartía con el proyecto principal.

No estoy seguro de esto, pero creo que NPM pensó que el módulo esperaba una versión diferente de las dependencias que compartía con el proyecto principal.

Así que la clase abstracta dentro del módulo hacía referencia a Observable desde su propia carpeta node_modules anidada, mientras que el proyecto principal hacía referencia a Observable desde la carpeta node_modules nivel superior.

Más información

Estas otras preguntas me proporcionaron alguna información al intentar resolver mi problema:

¿Por qué la instalación de npm dice que tengo dependencias no satisfechas?

Answer 6

Puede agregar una asignación de ruta en su tsconfig.json para asignar los rxjs en su dependencia al que está en la carpeta node_modules:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "rxjs": ["node_modules/rxjs"]
    }
}

más documentación está disponible en el sitio de Typescript

Answer 7

Si hay varias carpetas node_modules, debe agregar una asignación de ruta en el tsconfig de la aplicación host. Simplemente map @ rxjs / * a la raíz node_modules / rxjs / *. Entonces todo funciona bien.

Answer 8

Tengo el mismo problema.

Tengo la siguiente estructura de catálogo (proyecto angular2)

angular
|
---- common_files
      |
      ----- package.json
      |
      ----- index.ts
      |
      ----- catalog1
            |
            ---- package.json
            |
            ---- some_file_with_service_model_comopnent.ts
            |
            ---- index.ts    - this is regular barrel file
      |
      ----- catalog2
|
---- app1
     |
     ------ package.json
|
---- apps
     |
     ------ package.json

En mi común, he definido objetos y servicios:

export class ItemBase {}

esport class SomeType extends ItemBase {}

export class ItemServiceBase {
    public getItems():Observable<ItemBase> {
         //do something
    }
}

export class SomeService extends ItemServiceBase {
    //some specific operations can go here
}

En mis aplicaciones estaba usando elementos comunes de la siguiente manera:

import { SomeType, SomeTypeService } from "warehouse-system/products-settings";

class AttributeTypesComponent {
  private myValues : Observable<SomeType[]>;
  private service : SomeTypeService;

  constructor(){
      this.service = new SomeTypeService();
      this.myValues = <Observable<SomeType[]>> this.service.getItems();
  }
}

Esto causaba problemas de compilación: ERROR in [at-loader] src/app/some_file.ts:22:47 Type ''Observable<ItemBase[]>'' cannot be converted to type ''Observable<SomeType[]>''. Property ''source'' is protected but type ''Observable<T>'' is not a class derived from ''Observable<T>''. ERROR in [at-loader] src/app/some_file.ts:22:47 Type ''Observable<ItemBase[]>'' cannot be converted to type ''Observable<SomeType[]>''. Property ''source'' is protected but type ''Observable<T>'' is not a class derived from ''Observable<T>''.

Después de la investigación cambié el tipo de myValues pero aún no resuelve el problema. Problemas de compilación cambiados a:

ERROR in [at-loader] src/app/some_file.ts:22:47 Type ''Observable<SomeType[]>'' cannot be converted to type ''Observable<SomeType[]>''. Property ''source'' is protected but type ''Observable<T>'' is not a class derived from ''Observable<T>''.

La solución final (solución alternativa)

Lo que resolvió mi problema fue "reescribir" observable en el lado de la aplicación:

    this.myValues = Observable.create(subscriber => {
      this.service.getItems().subscribe(items => subscriber.next(items));
    });

Esta no es una buena forma de resolverlo. En mi opinión, este problema es causado por un error en npm / typescript / observables. Pero hasta que el problema no se resuelva en el lado de devs mecanografiado, puede usar esta solución como solución.