rxjs/Subject.d.ts 错误：类 'Subject<T>' 错误地扩展了基类 'Observable<T>'答案

【问题标题】：rxjs/Subject.d.ts error : Class 'Subject<T>' incorrectly extends base class 'Observable<T>'rxjs/Subject.d.ts 错误：类 'Subject<T>' 错误地扩展了基类 'Observable<T>'
【发布时间】：2017-12-01 07:24:49
【问题描述】：

我从this tutorial 中提取了示例模板代码并执行了以下两个步骤以开始使用 -

npm install // worked fine and created node_modules folder with all dependencies

npm start // 失败并出现以下错误-

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 '<T, 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'.
  npm ERR! code ELIFECYCLE
  npm ERR! errno 2

我看到在 subject.d.ts 中的 lift 声明如下 -

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

在 Observable.ts 中定义如下-

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

注意：- 1. 我是 Angular2 的新手，正在尝试掌握一些东西。

错误可能是由于lift方法的定义不兼容
我读完了这个github thread
如果我需要安装不同版本的 rxjs，请告诉我如何卸载并安装正确的 rxjs。

编辑1： 我在这里回复可能有点晚，但即使在使用 typescript 2.3.4 或 rxjs 6 alpha 之后，我仍然会遇到同样的错误。下面是我的 package.json，

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "@angular/upgrade": "2.0.0",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "6.0.0-alpha.0",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23",
    "angular2-in-memory-web-api": "0.0.20",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "lite-server": "^2.2.2",
    "typescript": "2.3.4",
    "typings": "^1.3.2"
  }
}

【问题讨论】：

github.com/Microsoft/TypeScript/issues/16593
一个little clarification
这似乎已在rxjs@5.4.2 中修复。

标签： angular typescript rxjs

【解决方案1】：

根据this，您需要更新 typescript 2.3.4 或 rxjs 6 alpha

在你的项目更新 typescript 或 rxjs 版本中找到你的 package.json 文件。示例

"typescript": "2.3.4"

做npm install

更新（06/29/2017）：-

根据 cmets 打字稿 "2.4.0" 工作。

【讨论】：

"typescript": "^2.3.4" 将匹配 2.4.1，而 2.4 是暴露 RxJS 问题的版本。
将打字稿版本替换为“2.4.0”对我有用。
我认为它必须完全是 "2.3.4" - "^2.3.4" 对我不起作用。
"typescript": "2.3.0" 和 "rxjs": "5.4.1" 的组合对我有用
@Jonnysai 对不起，我收回我说的话。项目已编译，但出现运行时错误并降级为 2.3.4 。更多信息：*.com/a/44556137

【解决方案2】：

正如其他人指出的那样，这个问题是由 TypeScript 2.4 中引入的对泛型进行更严格的类型检查造成的。这暴露了 RxJS 类型定义中的不一致，因此在RxJS version 5.4.2 中得到修复。 所以理想的解决方案是升级到 5.4.2。

如果您由于某种原因无法升级到 5.4.2，您应该改用 Alan Haddad 的增加类型声明的解决方案来为您自己的项目修复它。 IE。将此 sn-p 添加到您的应用中：

// TODO: Remove this when RxJS releases a stable version with a correct declaration of `Subject`.
import { Operator } from 'rxjs/Operator';
import { Observable } from 'rxjs/Observable';

declare module 'rxjs/Subject' {
  interface Subject<T> {
    lift<R>(operator: Operator<T, R>): Observable<R>;
  }
}

他的解决方案不会留下其他副作用，因此非常棒。或者，建议的解决方案对您的项目设置有更多的副作用，因此不太理想：

使用编译器标志--noStrictGenericChecks 关闭更严格的通用检查。然而，这将降低您自己的应用程序的严格程度，您可以这样做，但可能会引入不一致的类型定义，就像在此 RxJS 实例中所做的那样，这反过来可能会在您的应用程序中引入更多错误。
不检查标志 --skipLibCheck 设置为 true 的库中的类型。这也不理想，因为您可能不会报告某些类型错误。
升级到 RxJS 6 Alpha - 鉴于存在重大更改，这可能会以记录不良的方式破坏您的应用程序，因为它仍处于 Alpha 阶段。此外，如果您有其他依赖项，例如 Angular 2+，这可能不是真正受支持的选项，现在或下线破坏框架本身。我认为这是一个更难解决的问题。

【讨论】：

【解决方案3】：

一种公认的创可贴方法是将以下内容添加到您的 tsconfig.json 文件中，直到 RxJS 人员决定在使用 TypeScript 2.4.1 时如何处理该错误：

"compilerOptions": {

    "skipLibCheck": true,

 }

【讨论】：

谢谢你，它成功了。我尝试了很多其他的东西，但我猜这个错误与错误版本的错误软件包不相互支持有关......
我认为禁用或禁止 All LibCheck 不是一个好主意。
我在github issue上提出了同样的建议
@Jonnysai 因为您不拥有该代码，所以在短期内抑制 lib 检查是可以的，因为您可以向库提出问题，然后继续您自己的开发工作。您可以提交自己的问题并链接到他们的问题，当他们的类型得到修复时，您可以取消抑制。
真正的解决方案不应该是skipLibCheck。如果你这样做，你可能会忽视其他问题。更好的解决方案是noStrictGenericChecks，直到 RxJS 得到更新。

【解决方案4】：

您可以使用Module Augmentation临时解决此问题

以下代码为我解决了这个问题。一旦 RxJS 有一个没有出现这个问题的稳定版本，它就应该被删除。

// augmentations.ts
import {Operator} from 'rxjs/Operator';
import {Observable} from 'rxjs/Observable';

// TODO: Remove this when a stable release of RxJS without the bug is available.
declare module 'rxjs/Subject' {
  interface Subject<T> {
    lift<R>(operator: Operator<T, R>): Observable<R>;
  }
}

虽然 RxJS 本身如此大量地使用这种技术来描述它自己的形状可能具有讽刺意味，但它实际上通常适用于一系列问题。

虽然肯定有一些限制和粗糙的边缘，但使这项技术强大的部分原因是我们可以使用它来增强现有声明，使它们更加类型安全，而无需分叉和维护整个文件。

【讨论】：

你在哪里添加或导入这个文件？
将它添加到项目中的任何位置，以便编译器能够拾取它。如果您使用显式文件列表，请确保将其包含在内。否则它应该被自动拾取，只要它不在 tsconfig.json 文件之上
我试过这个，因为这似乎是破坏性最小的事情。工作正常。
我想出了如何添加文件——“import 'rxjs/Subject';” （不带“from”或花括号）在 app.component.ts.
@JaredWhipple 这是一个严重的问题，其含义远不止类型检查。您可以在tsconfig.json 中使用"paths" 来明确指定"rxjs" 和"rxjs/*" 应该在哪里解析以进行类型检查。但是，拥有多个版本可能会导致运行时问题。即使您不使用instanceof 和其他此类测试，您的部门也可能不太有原则。最好的办法是使用 videogular2 打开一个问题，建议将 RxJS 更改为对等依赖项。

【解决方案5】：

"dependencies": {
"@angular/animations": "^4.3.1",
"@angular/common": "^4.3.1",
"@angular/compiler": "^4.3.1",
"@angular/compiler-cli": "^4.3.1",
"@angular/core": "^4.3.1",
"@angular/forms": "^4.3.1",
"@angular/http": "^4.3.1",
"@angular/platform-browser": "^4.3.1",
"@angular/platform-browser-dynamic": "^4.3.1",
"@angular/platform-server": "^4.3.1",
"@angular/router": "^4.3.1",
"core-js": "^2.4.1",
"rxjs": "^5.4.2",
"ts-helpers": "^1.1.1",
"zone.js": "^0.7.2"
},
"devDependencies": {
"@angular/compiler-cli": "^2.3.1",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.28.3",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "^2.3.4",
"typings": "^1.3.2"
}

在 package.json 中 "rxjs": "^5.4.2", 和 "typescript": "^2.3.4", 然后是 npm install 和 ng 服务 它的工作。

【讨论】：

【解决方案6】：

只是一点点细节，试图投入我的两分钱。

当我们将 Typescript 升级到最新版本时，问题就出现了，现在是 TypeScript 2.4.1，[“因为我们喜欢升级：)”]，在他的回答中是 mentioned by @Jonnysai以及那里提供的链接，有关于问题及其修复的详细讨论。

所以，对我有用的是：
1. 我必须先Un安装TypeScript 2.4.1，方法是转到控制面板 > 程序和功能...
2. 重新安装TypeScript 2.4.0，然后确保在package.json 文件中，你有这个

配置，正如here 所提到的，在一个相当短的细节中。
您可以从here 下载 TypeScript 2.4.0，适用于 Visual Studio 2015

【讨论】：

这很简单，没有“变通办法”。我不确定这是否重要，但我的 rxjs 是“5.0.1”，我没有改变它，但一切似乎都很好。谢谢你的两分钱 - 它帮助了我！
我在使用 Typescript 2.3.4 时也遇到了这个问题。因此，由于升级到 2.4.1 而出现问题似乎是不正确的。当前的 angular-cli 安装 2.3.4，因为它说它需要

【解决方案7】：

您可以在 TypeScript 2.4 中临时使用 --noStrictGenericChecks 标志来解决此问题。

这是命令行中的--noStrictGenericChecks，或者只是tsconfig.json 中"compilerOptions" 字段中的"noStrictGenericChecks": true。

请记住，RxJS 6 会更正此问题。

看到这个类似的问题：How do I get around this error in RxJS 5.x in TypeScript 2.4?

【讨论】：

你把旗帜放在哪里？

【解决方案8】：

请更改Subject.d.ts文件的以下行：

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

到：

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

返回类型应该是Observable<R> 而不是Observable<T>

【讨论】：

【解决方案9】：

在 tsconfig.config 文件中保持 noStrictGeneric 选项为真

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

【讨论】：

【解决方案10】：

在 "compilerOptions" 节点下的 tsconfig.json 文件中添加 "noStrictGenericChecks": true，如下图所示并构建应用程序。添加此错误解决后，我遇到了同样的错误。

【讨论】：

【解决方案11】：

我发现了同样的问题，我通过使用 "rxjs": "5.4.1", "typescript": "~2.4.0" 并添加 "noStrictGenericChecks": true 进入 tsconfig.json。

【讨论】：

【解决方案12】：

RxJS 6 将修复此问题，但作为临时解决方法，您可以使用 noStrictGenericChecks 编译器选项。

在tsconfig.json中，放入compilerOptions并设置为true。

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

在命令行上是--noStrictGenericChecks。

为什么会这样：

TypeScript 2.4 的严格性发生了变化，Subject 没有提升到正确的 Observable。签名真的应该是

（运算符：运算符）=> 可观察的

这将在 RxJS 6 中修复。

【讨论】：

【解决方案13】：

转到 Package.json 文件并修改以下配置

...
  "rxjs": "5.4.1",
  "typescript": "~2.4.0"
...

会有用的

【讨论】：

【解决方案14】：

单独使用上述方法并没有帮助，但是，使用以下方法： How do I get around this “Subject incorrectly extends Observable” error in TypeScript 2.4 and RxJs 5

解决了问题。那里还提到该问题已在 RxJs 6 中修复，所以这更多是一个临时修复，它帮助我成功运行了这个很好的示例（之前编译但在加载时出现错误）： Angular 4 application development with Bootstrap 4 and TypeScript

【讨论】：

【解决方案15】：

重新安装 rxjs -> npm install rxjs@6 rxjs-compat@6 --save

【讨论】：

【解决方案16】：

现在我们不需要 ionic-native 模块 - 我们只需要 @ionic-native/core。运行

npm uninstall ionic-native --save

它会解决你的问题..

【讨论】：

【解决方案17】：

只需添加

"noStrictGenericChecks": true

到你的 tsconfig.json

【讨论】：

【解决方案18】：

感谢 zmag 和 Rahul Sharma 的回答，它有效！ @zmag @Rahul Sharma

  "rxjs": "5.4.1",
  "typescript": "~2.4.0"

我的问题如下：

typings/globals/core-js/index.d.ts:3:14 - error TS2300: Duplicate identifier

进行更改。

转到 Package.json 文件并修改以下配置

  "rxjs": "5.4.1",
  "typescript": "~2.4.0"

【讨论】：

【解决方案19】：

是的，问题出在打字稿 2.4.1 我刚刚从控制面板卸载了它，它适用于我，因为 Visual Studio 2017 已经有了它。

【讨论】：