rxjs / Subject.d.ts错误:类'Subject<T>'错误地扩展基类'Observable<T>'

我从https://github.com/gopinav/Angular-2-Tutorials中提取了示例模板代码,然后执行以下两个步骤 -

  • 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

我在主题中看到.d.ts电梯声明如下 -

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

在Observable.ts中,定义如下 -

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

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

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

回答(16)

2 years ago

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

在项目更新typescript或rxjs版本中转到package.json文件 . 例

"typescript": "2.3.4"

npm install

update(06/29/2017):-

根据评论打字稿 "2.4.0" 工作 .

2 years ago

正如其他人指出的那样,这个问题是由于TypeScript 2.4中引入的泛型的更严格的类型检查而产生的 . 这暴露了RxJS类型定义中的不一致,因此在RxJS version 5.4.2中得到修复 . So ideal solution is to just upgrade to 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 years ago

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

"compilerOptions": {

    "skipLibCheck": true,

 }

2 years ago

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

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

2 years ago

"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","typescript": "^2.3.4", 然后 npm installng serve 正在工作 .

2 years ago

只是一点点细节,试图投入我的两分钱 .

当我们将Typescript升级到最新版本(现在是TypeScript 2.4.1,["as we love the upgrades : )"],并且在他的答案中提供了mentioned by @Jonnysai并且在那里提供了链接时)会出现问题,有关该问题及其修复的详细讨论 .

那么,对我有用的是:
1.我必须先 Un 安装TypeScript 2.4.1,进入控制面板>程序和功能...
2.重新安装,TypeScript 2.4.0,然后确保在 package.json 文件中,你有这个

enter image description here

配置,如here中提到的更详细 .

对于Visual Studio 2015,您可以从here下载TypeScript 2.4.0

2 years ago

您可以暂时使用 --noStrictGenericChecks 标志来解决TypeScript 2.4中的问题 .

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

请记住,RxJS 6将更正此问题 .

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

2 years ago

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

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

至:

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

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

2 years ago

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

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

2 years ago

我发现了同样的问题,我使用 "rxjs": "5.4.1""typescript": "~2.4.0" 并将 "noStrictGenericChecks": true 添加到tsconfig.json中解决了这个问题 .

2 years ago

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

2 years ago

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

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

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

在命令行上它是 --noStrictGenericChecks .

为什么会这样:

TypeScript 2.4具有严格的更改,并且Subject没有提升到正确的Observable . 签名真的应该是

(运算符:运算符)=>可观察

这将在RxJS 6中修复 .

2 years ago

但是,使用以上方法并没有帮助,使用以下方法: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

2 years ago

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

2 years ago

现在我们不需要离子原生模块 - 我们只需要@ ionic-native / core . 跑

npm uninstall ionic-native --save

它会解决你的问题..

2 years ago

是的问题是TypeScript 2.4.1我只是从控制面板卸载它,它适用于我,因为Visual Studio 2017已经这样 .