'Observable <T>'不是从'Observable <T>派生的类

Question

当尝试从node_modulestypescript编译器中的类扩展类时抛出一个错误说:

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

这只发生在基类来自a时node_module.

基类看起来像:

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

在项目中对其进行子类化:

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

如果基类(TestBase)从node_module项目移动到它自己并将导入更改为看起来像 import {TestBase} from "./base";错误消失.

这是因为编译为每个模块创建了不同范围的类型吗？我完全迷失在这里.

更新:

这似乎链接时才会发生node_modules有npm link.似乎目前一种可能的解决方法是在基类中返回一个类型而不是返回一个接口.

更多信息可以在这里找到:

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

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

Answer 1

在为项目开发自定义模块时,我遇到了一个非常类似的问题.我不是100%确定我们遇到了同样的问题,但它看起来非常接近.

我是如何解决我的问题的

我建议删除您的node_modules文件夹并重新安装所有依赖项.

rm -rf node_modules/
npm cache clean
npm install

这解决了我.

问题是什么(我认为)

我正在开发的模块有一个主要项目试图扩展的抽象类.但是,在尝试编译主项目时,编译器会抛出相同的错误.

经过一番挖掘后,我注意到NPM会抱怨UNMET PEER DEPENDENCY将模块安装到我的项目中.在查看node_modules项目内部时,我注意到我的模块中有另一个node_modules嵌套在其中的文件夹,其中包含与主项目共享的一些依赖项.

我不确定这一点,但我认为NPM认为该模块期望它与主项目共享的不同版本的依赖项.

因此,模块内部的抽象类从其自己的嵌套node_modules文件夹引用Observable,而主项目从顶级node_modules文件夹引用Observable .

更多信息

在尝试解决我的问题时,其他问题为我提供了一些见解:

为什么npm install说我有未满足的依赖项？

Answer 2

我遇到了同样的问题.

我有以下目录结构(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

在我的共同点中,我已经定义了对象和服务:

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
}

在我的应用程序中,我使用的是常见项目,如下所示:

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

这导致了编译问题: 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>'.

调查后我改变了类型,myValues但仍然没有解决问题.编译问题变为:

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

最终解决方案(解决方法)

什么解决了我的问题,是在应用程序端"重写"可观察的:

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

这不是解决它的好方法.在我看来,这个问题是由npm/typescript/observables中的错误引起的.但是直到这个问题在typescript开发方面没有解决,你可以使用这个解决方法作为解决方案.

Answer 3

如果有多个node_modules文件夹,则必须在主机应用程序的tsconfig中添加路径映射.只需将@ rxjs/*映射到根node_modules/rxjs/*即可.一切正常.

Answer 4

您可以在 tsconfig.json 中添加路径映射，以将依赖项中的 rxjs 映射到 node_modules 文件夹中的一个：

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

更多文档可在Typescript 站点获得

Answer 5

只有在执行 npm link 时才会出现此问题。

将路径添加到客户端项目的 tsconfig.json 的 compilerOptions

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

这应该可以工作，因为它将指定来自 rxjs 依赖项的路径。