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

'Observable<T>' is not a class derived from 'Observable<T>'

提问by fredrik

When trying to extend a class from a class in a node_modulesthe typescript compiler throws a error saying:

当试图从一个类中的类扩展一个类时，node_modules打字稿编译器会抛出一个错误说：

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

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

This only happens when the base class is from a node_module.

这只发生在基类来自node_module.

The base class looks like:

基类看起来像：

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

Subclassing it in a project:

在项目中将其子类化：

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

If the base class (TestBase) is moved from the node_moduleto the project it self and change the import to look like import {TestBase} from "./base";The error disappears.

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

Is this due to that the compiles creates the types in different scopes for each module? I'm completely lost here.

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

Update:

更新：

This seems to only happen when linking the node_moduleswith npm link. Seems like one possible workaround for the moment is to instead of returning a type in the base class to return a interface.

这似乎只发生在node_modules与npm link. 目前似乎一种可能的解决方法是不返回基类中的类型以返回接口。

More information can be found here:

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

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

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

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

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

回答by Maxime Rainville

I just came across a very similar issue while developing a custom module for a project. I'm not 100% sure we were having the same problem, but it looks pretty close.

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

How I resolved my problem

我如何解决我的问题

I would suggest deleting your node_modulesfolder and reinstalling all your dependencies.

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

rm -rf node_modules/
npm cache clean
npm install

That solved it for me.

那为我解决了。

What the problem was (I think)

问题是什么（我认为）

The module I was developing had an abstract class that the main project was trying to extend. However when trying to compile the main project, the compiler would throw the same error you are getting.

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

After a bit of digging around, I noticed NPM would complain about an UNMET PEER DEPENDENCYwhen installing my module into my project. When looking inside the node_modulesof the project, I noticed that my module had another node_modulesfolder nested inside of it with some dependencies that it shared with the main project.

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

I'm not certain about this, but I think NPM thought the module was expecting different version of dependencies it shared with the main project.

我对此不确定，但我认为 NPM 认为该模块期望它与主项目共享不同版本的依赖项。

So the abstract class inside the module was referencing Observable from its own nested node_modulesfolder while the main project was referencing Observable from the top level node_modulesfolder.

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

More information

更多信息

This other questions provided some insight for me when trying solve my problem:

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

Why does npm install say I have unmet dependencies?

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

回答by Maciej Treder

I got same issue.

我有同样的问题。

I have following catalog structure (angular2 project)

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

In my common I have definied objects and services:

在我的共同点中，我定义了对象和服务：

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
}

In my apps I was using items from common as follows:

在我的应用程序中，我使用的是 common 项目，如下所示：

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

This were causing compilation issues: 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>'.

After investigation I changed type of myValuesbut it still doesn't solve problem. Compilation issues changed to:

经过调查，我改变了类型，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>'.

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

The final solution (workaround)

最终解决方案（解决方法）

What solved my problem, was "rewriting" observable on the app side:

解决我的问题的是在应用程序端“重写”可观察：

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

This is not really nice way to solve it. In my opinion this problem is caused by a bug in npm/typescript/observables. But untill the problem is not solved on the typescript devs side, you can use this workaround as solution.

这不是解决问题的好方法。在我看来，这个问题是由 npm/typescript/observables 中的错误引起的。但是直到打字稿开发人员方面没有解决问题之前，您可以使用此解决方法作为解决方案。

回答by David Ibl

If there are multiple node_modules folders you have to add a path mapping in the host app's tsconfig. Just map @rxjs/* to the root node_modules/rxjs/*. Then everything works fine.

如果有多个 node_modules 文件夹，您必须在主机应用程序的 tsconfig.xml 中添加路径映射。只需将@rxjs/* 映射到根节点 node_modules/rxjs/*。然后一切正常。

回答by jitenderd

The issue will occur only when you do npm link.

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

Add paths to the compilerOptions of client project's tsconfig.json

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

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

This should work as it will specify the path from rxjs dependency.

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

回答by André

I was getting a crazy error like

我收到了一个疯狂的错误，比如

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

And the reason was npm link(actually npm i ../other-projectbut it's quite the same thing).

原因是npm link（实际上，npm i ../other-project但这是完全相同的）。

My workaround was kinda cheating:

我的解决方法有点作弊：

(stream as any as Observable<MessageEvent>)

LOL

哈哈

回答by JusMalcolm

You can add a path mapping in your tsconfig.json to map the rxjs in your dependency to the one in your node_modules folder:

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

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

more documentation is available at the Typescript site

更多文档可在Typescript 站点获得

回答by Bart Gluszak

After listing rxjs modules:

列出 rxjs 模块后：

npm list rxjs

+-- @angular/[email protected] | +-- @angular-devkit/[email protected] | | -- [email protected] | +-- @angular-devkit/[email protected] | |-- [email protected] | -- [email protected] -- [email protected]

npm 列表 rxjs

+-- @angular/[email protected] | +-- @angular-devkit/[email protected] | | -- [email protected] | +-- @angular-devkit/[email protected] | |-- [email protected] | -- [email protected] -- [email protected]

You can see 2 versions of the same module. My project required lower version of rxjs, and e.g. anglular/cli required higher version of rxjs.

您可以看到同一模块的 2 个版本。我的项目需要较低版本的 rxjs，例如，anglular/cli 需要较高版本的 rxjs。

It didn't cause any problems before but suddenly all projects with the same dependencies were throwing the same TS90010 errors e.g.:

它之前没有引起任何问题，但突然间所有具有相同依赖项的项目都抛出相同的 TS90010 错误，例如：

ERROR in [at-loader] ./src/main/webapp/app/admin/user-management/user-management-detail.component.ts:23:9 TS90010: Type 'Subscription' is not assignable to type 'Subscription'. Two different types with this name exist, but they are unrelated.

Property '_parent' is protected but type 'Subscription' is not a class derived from 'Subscription'.

[at-loader] ./src/main/webapp/app/admin/user-management/user-management-detail.component.ts:23:9 TS90010 中的错误：“订阅”类型不可分配给“订阅”类型. 存在具有此名称的两种不同类型，但它们无关。

属性“_parent”受保护，但“订阅”类型不是从“订阅”派生的类。

Finally I updated typescript version in package.json from 2.6.2 to 2.9.2 an all errors disappeared.

最后，我将 package.json 中的打字稿版本从 2.6.2 更新到 2.9.2，所有错误都消失了。

回答by Shnd

For me it was my editor issue. VSCode was including an import from the declaration files (*.d.ts) while the actual class was in another place.

对我来说，这是我的编辑问题。VSCode 包含来自声明文件 ( *.d.ts)的导入，而实际的类位于另一个位置。

I replaced the declaration file import with the actual class file import.

我用实际的类文件导入替换了声明文件导入。

回答by MANGESH SUPE

actually may this problem comes due to your typescript version change

实际上这个问题可能是由于您的打字稿版本更改造成的

try to change your typescript version

尝试更改您的打字稿版本

1. You can find that in

   package.json

1. 你可以在

   package.json

set to 2.4.3

设置 2.4.3

1. if not work then simply try on cli

   npm unlink typescript

   npm install [email protected]

2. 如果不起作用，那么只需尝试 cli

   npm unlink typescript

   npm install [email protected]

and after installation complete packages.json

安装完成后，packages.json

plz check it should be work in dependencies

请检查它应该在依赖项中工作

"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^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/router": "^5.2.0",
"core-js": "^2.4.1",
"rxjs": "5.4.3",
"typescript": "^2.3.4", <<---------------remove ^
"zone.js": "^0.8.19"

"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular /core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-b​​rowser": "^ 5.2.0",
"@angular/platform-b​​rowser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"core-js": "^2.4.1",
“rxjs”：“5.4.3”，
“打字稿”：“^2.3.4”，<< ---------------删除^
“zone.js”：“^0.8.19”

but one thing is clear it is not error this is due to environment change

但有一件事很明显，这不是错误，这是由于环境变化造成的

if still facing problem then try reinstall node module

如果仍然遇到问题，请尝试重新安装节点模块

good luck.......

祝你好运.......