'osservabile <T>' non è una classe derivata da 'osservabile <T>'

Question

Quando si cerca di estendere una classe da una classe in un node_modules il compilatore dattiloscritto getta un errore che dice:

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

Questo accade solo quando la classe base è da node_module.

La classe di base si presenta come:

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')); 
    } 
} 

sottoclasse in un progetto:

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(); 
    } 
} 

Se la classe di base (TestBase) viene spostato dal node_module al progetto è di per sé e cambiare la importare come import {TestBase} from "./base"; L'errore scompare.

Ciò è dovuto al fatto che la compilazione crea i tipi in ambiti diversi per ciascun modulo? Sono completamente perso qui.

Aggiornamento:

Questo sembra accadere solo quando collega la node_modules con npm link. Sembra che una possibile soluzione alternativa per il momento sia quella di restituire un tipo nella classe base per restituire un'interfaccia.

Maggiori informazioni possono essere trovate qui:

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

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

Answer 1

ho avuto lo stesso problema.

Ho seguito struttura del catalogo (angular2 progetto)

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 

Nei miei oggetti e servizi comuni che ho definied:

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 
} 

Nelle mie applicazioni stavo usando gli articoli dal comune come segue:

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(); 
    } 
} 

Ciò causava problemi di compilazione: 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>'.

Dopo l'inchiesta ho cambiato il tipo di myValues ma non risolve ancora il problema.Problemi di compilazione cambiato in:

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 soluzione finale (soluzione)

Che risolto il mio problema, è stato "riscrittura" osservabile sul lato app:

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

Questo è non è un bel modo per risolverlo. A mio parere questo problema è causato da un bug in npm/dattiloscritto/osservabili. Ma fino a quando il problema non viene risolto dal lato del dattiloscritto, è possibile utilizzare questa soluzione alternativa come soluzione.

Answer 2

Mi sono appena imbattuto in un problema molto simile durante lo sviluppo di un modulo personalizzato per un progetto. Non sono sicuro al 100% che stessimo avendo lo stesso problema, ma sembra piuttosto vicino.

Come ho risolto il mio problema

vorrei suggerire di eliminare la cartella node_modules e reinstallare tutte le dipendenze.

rm -rf node_modules/ 
npm cache clean 
npm install 

Questo l'ha risolto per me.

quale fosse il problema (credo)

Il modulo stavo sviluppando avuto una classe astratta che il progetto principale stava cercando di estendere. Tuttavia, quando si tenta di compilare il progetto principale, il compilatore genera lo stesso errore che si ottiene.

Dopo un po 'di ricerche, ho notato che NPM si lamentava di un UNMET PEER DEPENDENCY durante l'installazione del mio modulo nel mio progetto. Guardando all'interno del node_modules del progetto, ho notato che il mio modulo aveva un'altra cartella node_modules annidata al suo interno con alcune dipendenze condivise con il progetto principale.

Non ne sono sicuro, ma penso che NPM abbia pensato che il modulo si aspettasse versioni diverse delle dipendenze condivise con il progetto principale.

Quindi la classe astratta all'interno del modulo faceva riferimento a Observable dalla propria cartella nidificata node_modules mentre il progetto principale faceva riferimento a Observable dalla cartella node_modules di livello superiore.

Maggiori informazioni

Questa altre domande previste una certa comprensione per me quando si cerca di risolvere il mio problema:

Why does npm install say I have unmet dependencies?

Answer 3

stavo ottenendo un errore di folle come

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

E la ragione era npm link (in realtà npm i ../other-project ma è quasi la stessa cosa).

mia soluzione era un po 'barare:

(stream as any as Observable<MessageEvent>) 

LOL

Answer 4

Se ci sono node_modules più cartelle si deve aggiungere un mapping di percorso nel TSconfig dell'app host. Basta mappare @ rxjs/* alla root node_modules/rxjs/*. Quindi tutto funziona bene.