如何解决 TypeScript 2.4 和 RxJS 5.x 中的“主题不正确地扩展 Observable”错误？

Posted 2023-02-23

【中文标题】如何解决 TypeScript 2.4 和 RxJS 5.x 中的“主题不正确地扩展 Observable”错误？

【英文标题】：How do I get around this "Subject incorrectly extends Observable" error in TypeScript 2.4 and RxJS 5.x?

【发布时间】：2017-12-02 06:33:22

【问题描述】：

编译时，在 RxJS 声明文件中出现以下编译器错误：

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

这里发生了什么，如何在不降级到 TypeScript 2.3 或更早版本的情况下解决这个问题？

【参考方案1】：

解决方案

RxJS 5.4.2 现在应该与 TypeScript 2.4.1 完美配合。 如果可能，只需升级到 5.4.2+。

npm install --save rxjs@^5.4.2

如果您没有立即看到更改，请尝试重新启动编辑器和/或重新编译。

如果没有，下面的解决方案应该可以工作。

为什么会这样

TypeScript 2.4 有一个严格的变化，Subject<T> 没有提升到正确的Observable。签名真的应该是

<R>(operator: Operator<T, R>) => Observable<R>

这将在 RxJS 6 中修复。

替代解决方案

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

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

    "compilerOptions": 
        "noStrictGenericChecks": true
    

在命令行上是--noStrictGenericChecks。

【讨论】：

我在哪里使用这个“--noStrictGenericChecks”？

您的tsconfig.json 中的compilerOptions。只需删除破折号并将其设置为true。

你能帮我解决这个问题吗？***.com/questions/44817801/…。这发生在我认为我的打字稿更新到 2.4.1 时。

除了我的 typescript 2.4.0 运行时对 noStrictGenericChecks 选项一无所知.. 并且尝试设置它会导致错误..

非常感谢您的回答。 npm install --save rxjs@^5.4.2 解决了我的问题。

【参考方案2】：

我在 package.json 文件中做了以下两个改动。

1) 在依赖项部分将 rxjs 版本更改为 5.4.1。

“依赖”： “rxjs”：“5.4.1”

2) 在 devDependencies 部分将 typescript 版本更改为 2.4.0。

“开发依赖”： “打字稿”：“2.4.0”

在进行两项更改后，我运行了“npm install”命令，它成功了。

【参考方案3】：

今天，遇到了这个错误，并通过以下三个步骤实际解决了这个问题。因此，与希望分享相同的内容，这将对其他人有所帮助。

第 1 步： 在 package.json 文件中将条目更改为“rxjs”：“5.4.2”，

第 2 步： 从项目中删除 node_modules 文件夹，该文件夹位于根目录中

第 3 步： 现在，右键单击 package.json 文件并单击恢复，如下图所示：

注意：它将再次使用新文件创建node_module文件夹，现在构建解决方案，希望您不会遇到与上述问题相关的任何构建错误。

【讨论】：

为我解决了这个问题。你会认为官方 Angular 网站上的教程会与最新版本保持同步，但事实并非如此。

是的，你是对的，很高兴它解决了你的问题@breez。快乐分享..:)

【参考方案4】：

我在 package.json 文件中进行了以下更改。

 "dependencies": 
    "@angular/animations": "4.1.3",
    "@angular/common": "4.4.6",
    "@angular/compiler": "4.4.6",
    "@angular/compiler-cli": "2.4.8",
    "@angular/core": "4.4.6",
    "@angular/forms": "4.4.6",
    "@angular/http": "4.4.6",
    "@angular/platform-browser": "4.4.6",
    "@angular/platform-browser-dynamic": "4.4.6",
    "@angular/platform-server": "4.4.6",
    "@angular/router": "4.4.6",
    "@ionic/storage": "2.0.0",
    "cordova-plugin-console": "1.0.5",
    "cordova-plugin-device": "1.1.4",
    "cordova-plugin-splashscreen": "~4.0.1",
    "cordova-plugin-statusbar": "2.2.1",
    "cordova-plugin-whitelist": "1.3.1",
    "ionic-angular": "2.2.0",
    "ionic-native": "2.4.1",
    "ionic-plugin-keyboard": "~2.2.1",
    "ionic-tooltips": "^2.0.0",
    "ionicons": "3.0.0",
    "rxjs": "^5.4.2",
    "sw-toolbox": "3.4.0",
    "typescript": "2.4.0",
    "zone.js": "0.7.2"
  

rxjs 和 typescript 版本的变化。

【参考方案5】：

在您的主题课程中：

改变这一行：

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

到：

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

【参考方案6】：

添加

"noStrictGenericChecks": true

在 tsconfig.json 文件中

【参考方案7】：

这是 rxjs 和 typscript 之间的不匹配问题，使用 "rxjs": "5.4.2" 和 "typescript": "~2.3.4" 对我有用

【参考方案8】：

我遇到了同样的问题，发现以下网站很有帮助 https://www.georgephillipson.com/blog/jquery/setting-up-angular-2-in-visual-studio-2017/ 它有关于为 MVC 网站设置 Angular 的分步说明，解释了如何修复这篇文章所指的错误以及指向 GitHub 的链接带有完整的代码。

我觉得它很有帮助，所以我想我会让其他人知道

根据 Zoes 的帖子，我添加了更多关于我认为该链接可能有用的原因

该页面展示了如何更新 RxJS 以修复错误，它还展示了如何检查您的计算机上是否安装了 Node 和 NPM，并解释了如何添加 TypeScript，然后展示了如何设置您的 cshtml 文件以显示角度内容

【讨论】：

欢迎提供解决方案的链接，但请确保您的答案在没有它的情况下有用：add context around the link 这样您的其他用户就会知道它是什么以及为什么会出现，然后引用最相关的内容您链接到的页面的一部分，以防目标页面不可用。 Answers that are little more than a link may be deleted.

【参考方案9】：

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

    "compilerOptions": true,
    "compilerOptions": 
        "noStrictGenericChecks": true