rxjs / Subject.d.ts错误:Class&#39; Subject <t>&#39;错误地扩展了基类&#39; Observable <t>&#39;

时间:2017-06-28 04:47:26

标签: angular typescript rxjs

我从this tutorial中提取了示例模板代码,然后执行了以下两个步骤 -

  1. npm install // worked fine and created node_modules folder with all dependencies
  2. 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
    
  3. 我看到在subject.d.ts提升声明如下 -

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

    在Observable.ts中,它定义如下 -

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

    注意: - 1.我是Angular2的新手并试图掌握一些东西。

    1. 错误可能是由于升力法的定义不兼容

    2. 我通读了这个github thread

    3. 如果我需要安装一些不同版本的rxjs,请告诉我们如何卸载并安装正确的rxjs。

    4. EDIT1: 我在这里回复可能有点迟,但即使在使用 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"
        }
      }
      

19 个答案:

答案 0 :(得分:70)

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

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

"typescript": "2.3.4"

npm install

<强>更新(2017年6月29日): -

根据评论标签"2.4.0"正在工作。

答案 1 :(得分:24)

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

如果由于某种原因无法升级到5.4.2,您应该使用Alan Haddad的扩充类型声明的解决方案来为您自己的项目修复它。即将此代码段添加到您的应用中:

// 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+,这可能不是一个真正支持的选项,现在或在线破坏框架本身。我认为这是一个更难解决的问题。

答案 2 :(得分:23)

一种可接受的创可贴方法是将以下内容添加到tsconfig.json文件中,直到RxJS人员决定在使用TypeScript 2.4.1时他们想要做什么:

"compilerOptions": {

    "skipLibCheck": true,

 }

答案 3 :(得分:19)

您可以使用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本身如此大量使用这种技术来描述自己的形状或许具有讽刺意味,但它实际上通常适用于一系列问题。

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

答案 4 :(得分:8)

只是一点点细节,试图加入我的两分钱。

当我们将 Typescript 升级到最新版本时会出现问题,该版本现在是TypeScript 2.4.1,[“因为我们喜欢升级:)”,以及{{3}在他的回答和那里提供的链接中,有关于问题及其修复的详细讨论。

那么,为我工作的原因是:
1.首先,我必须 取消 安装 / em>&gt; 程序和功能......
2.重新安装,mentioned by @Jonnysai,然后确保在package.json文件中,您提到了此{
TypeScript 2.4.0 configuration配置,如上所述{ {3}}在一个相当短的细节中
 您可以从enter image description here下载 TypeScript 2.4.0 ,为Visual Studio 2015下载

答案 5 :(得分:8)

"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"
}

in package.json "rxjs": "^5.4.2",&#34;打字稿&#34;:&#34; ^ 2.3.4&#34;,然后< strong> npm install 和 ng serve 正在运行。

答案 6 :(得分:5)

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

这是命令行上的--noStrictGenericChecks,或"noStrictGenericChecks": true"compilerOptions"字段中的tsconfig.json

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

请参阅此类似问题:How do I get around this error in RxJS 5.x in TypeScript 2.4?

答案 7 :(得分:3)

“compilerOptions”节点下的 tsconfig.json 文件中添加“noStrictGenericChecks”:true ,如下图所示&amp;构建应用程序添加此错误后,我遇到了同样的错误。  enter image description here

答案 8 :(得分:3)

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

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

答案 9 :(得分:3)

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

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

为:

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

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

答案 10 :(得分:2)

我发现了同样的问题,我使用“rxjs”解决了它:“5.4.1”“typescript”:“~2.4.0”并添加< strong>“noStrictGenericChecks”:true 到tsconfig.json。

答案 11 :(得分:1)

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

tsconfig.json中,将其放入compilerOptions并将其设置为true。

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

在命令行上--noStrictGenericChecks

为什么会这样:

TypeScript 2.4具有严格性更改,并且Subject未提升到正确的Observable。签名确实应该是

  

(运营商:运营商)=&gt;可观察到的

这将在RxJS 6中修复。

答案 12 :(得分:0)

然而,单独使用上述方法并没有帮助,使用以下方法: 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

答案 13 :(得分:0)

重新安装rxjs - &gt; npm install rxjs @ 6 rxjs-compat @ 6 --save

答案 14 :(得分:0)

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

npm uninstall ionic-native --save

它将解决您的问题。

答案 15 :(得分:0)

只需添加

"noStrictGenericChecks": true

到您的tsconfig.json

答案 16 :(得分:0)

感谢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"

答案 17 :(得分:-1)

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

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

它将起作用

答案 18 :(得分:-3)

是的,问题在于 TypeScript 2.4.1 我刚从控制面板卸载它,它对我有用,因为Visual Studio 2017已经有了这个。