rxjs / Subject.d.tsエラー:クラス 'Subject <T>'が基本クラス 'Observable <T>'を誤って拡張しています


89

このチュートリアルからサンプルテンプレートコードを抽出し、以下の2つの手順を実行して開始しました-

  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

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スレッドを読みました

  3. 別のバージョンのrxjsをインストールする必要がある場合は、正しいrxjsをアンインストールしてインストールする方法を教えてください。

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



これはrxjs@5.4.2で修正されたようです。

回答:


70

これに従って typescript 2.3.4またはrxjs 6 alphaを更新する必要があります

プロジェクト更新typescriptまたはrxjsバージョンのpackage.jsonファイルに移動します。例

"typescript": "2.3.4"

行う npm install

アップデート(06/29/2017):-

コメントのtypescriptが"2.4.0"動作するように。


6
"typescript": "^2.3.4"2.4.1に一致し、2.4はRxJSの問題を公開するバージョンです。
カータント2017年

5
typescriptのバージョンを「2.4.0」に置き換えたところ、うまくいきました。
Ajax

1
私はそれが正確に「2.3.4」でなければならないことを第二に言います-「^ 2.3.4」は私にとってはうまくいきませんでした。
maia

1
の組み合わせ"typescript": "2.3.0""rxjs": "5.4.1"私のために働いた
ericdemo07 2017年

@Jonnysai申し訳ありませんが、私が言ったことを取り戻します。プロジェクトはコンパイルされましたが、ランタイムエラーが発生し、2.3.4にダウングレードされました。詳細:stackoverflow.com/a/44556137
Carcamano 2017年

25

他の人が指摘したように、この問題はTypeScript 2.4で導入されたジェネリックのより厳密な型チェックの結果として生じました。これにより、RxJSの型定義に不整合が明らかになり、RxJSバージョン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へのアップグレード-重大な変更がある場合、これはアプリがまだアルファ版であるため、不適切に文書化された方法でアプリを破損する可能性があります。さらに、Angular 2+のような他の依存関係がある場合、これは実際にはサポートされていないオプションであり、フレームワーク自体を現在または将来的に壊します。これは解決するのがさらに難しい問題だと思います。

24

認められているバンドエイドアプローチは、TypeScript 2.4.1を使用しているときにRxJSの人々がエラーについて何をしたいかを決定するまで、以下をtsconfig.jsonファイルに追加することです。

"compilerOptions": {

    "skipLibCheck": true,

 }

これをありがとう、うまくいきました。他にもいろいろ試しましたが、このエラーは間違ったバージョンの間違ったパッケージが相互にサポートしていないことに関連していると思います...
Salim

2
All LibCheckを無効にしたり抑制したりするのは良い考えではないと思います。
CharanRoot 2017年


@Jonnysaiはそのコードを所有していないため、ライブラリに問題を提出し、独自の開発作業を続行できるため、短期的にはlibチェックを抑制しても問題ありません。あなたはあなた自身の問題を提出し、彼らの問題にリンクすることができます、そして、彼らのタイプが修正されるとき、あなたは抑圧を取り除くことができます。
Sean Newell 2017年

6
実際の解決策はにすべきではありませskipLibCheck。あなたがそれをしているなら、あなたは潜在的に他の問題に苦しんでいます。より良い解決策はnoStrictGenericChecks、RxJSが更新されるまでです。
Daniel Rosenwasser 2017年

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自体がこのテクニックを多用して独自の形状を記述するのは皮肉なことかもしれませんが、実際には一般にさまざまな問題に適用できます。

確かに限界とラフなエッジがありますが、このテクニックを強力にする理由の1つは、既存の宣言を拡張して、ファイル全体をフォークおよびメンテナンスすることなく、よりタイプセーフにすることができることです。


このファイルをどこに追加またはインポートしますか?
デイブ

1
コンパイラーによってピックアップされるように、プロジェクトの任意の場所に追加します。明示的なファイルリストを使用している場合は、それが含まれていることを確認してください。それ以外の場合は、tsconfig.jsonファイルの上にない限り、自動的に取得されます
Aluan Haddad

2
混乱を最小限に抑えるために、私はこれを試しました。うまくいきました。
スティーブンホルト2017

1
私はファイルを追加する方法を見つけました-"import 'rxjs / Subject';" (「from」または中括弧なし)app.component.ts内。
John Pankowicz

1
@JaredWhippleこれは深刻な問題であり、タイプチェック以上の意味があります。"paths"in tsconfig.jsonを使用して、型チェックの場所を明示的に指定し"rxjs""rxjs/*"解決する必要があります。ただし、複数のバージョンがあると、ランタイムの問題が発生する可能性があります。あなたがinstanceof他のそのようなテストを使用していなくても、あなたの部下はそれほど原則的ではないかもしれません。最善の方法は、videogular2で問題を開き、RxJSをピア依存関係に変更することを提案することです。
Aluan Haddad

9
"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 installngが機能します。


8

私の2セントを入れようとして、ほんの少しの詳細です。

Typescriptを最新バージョン(現在はTypeScript 2.4.1)にアップグレードすると問題が発生します。["アップグレードが気に入っているので:) "]と、@ Jonnysaiが彼の回答とリンクに記載しているように、問題とその修正に関する詳細な議論。

それで、私にとってうまくいったことは次のとおり
です。1. 最初にTypeScript 2.4.1アンインストールする 必要がありました。コントロールパネル > プログラムと機能...に移動します 。2. TypeScript 2.4.0をインストールし直し、次にファイルには、あなたは、この持って述べたように、設定をここでかなり短く詳細に。 あなたはダウンロードすることができ活字体2.4.0からここでVisual Studioの2015年
package.json

ここに画像の説明を入力してください



これは「回避策」なしで非常に簡単に機能しました。これが問題かどうかはわかりませんが、私のrxjsは「5.0.1」で、変更していませんが、すべて問題ないようです。あなたの2セントをありがとう-それは私を助けました!
トムA

Typescript 2.3.4を使用してもこの問題が発生します。したがって、2.4.1へのアップグレードのために問題が発生することは正しくないようです。現在のangular-cliは<2.4.0を必要とすると言っているため、2.3.4をインストールします。
John Pankowicz

5

--noStrictGenericChecksフラグを一時的に使用して、TypeScript 2.4でこれを回避できます。

これは--noStrictGenericChecks、コマンドラインまたは"noStrictGenericChecks": true"compilerOptions"フィールドにありtsconfig.jsonます。

RxJS 6ではこれが修正されることに注意してください。

この同様の質問を参照してください:TypeScript 2.4のRxJS 5.xでこのエラーを回避するにはどうすればよいですか?


どこに旗を掲げますか?
デイブ

3

Subject.d.tsファイルの次の行を変更してください:

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

に:

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

戻り値の型は、おそらくあるべきObservable<R>ではなく、Observable<T>


3

tsconfig.configファイルでnoStrictGenericオプションをtrueのままにします

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

3

追加真:「noStrictGenericChecks」tsconfig.jsonの下のファイルを「compilerOptions」画像&ビルドアプリケーション以下に示すように、ノード。このエラーを追加して解決した後、同じエラーに直面しました。 ここに画像の説明を入力してください


2

私は同じ問題を見つけ、「rxjs」:「5.4.1」「typescript」:「〜2.4.0」を使用して「noStrictGenericChecks」:trueをtsconfig.jsonに追加することで解決しました。


1

RxJS 6ではこれが修正されますが、一時的な回避策として、noStrictGenericChecksコンパイラオプションを使用できます。

tsconfig.json、それを入れてcompilerOptionstrueに設定します。

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

コマンドラインでは--noStrictGenericChecksです。

なぜそれが起こっているのか:

TypeScript 2.4には厳密性の変更があり、Subjectは正しいObservableに引き上げられていません。署名は本当にあったはずです

(演算子:演算子)=>観察可能

これはRxJS 6で修正される予定です。


1

Package.jsonファイルに移動し、以下の設定を変更します

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

それが動作します


0

上記を単独で使用しても効果はありませんでしたが、次のアプローチを使用 しても問題が発生します。

問題を解決しました。また、RxJs 6で問題が修正されたことも言及されているため、これは一時的な修正であり、この素晴らしい例(以前にコンパイルされましたが、ロード時にエラーが発生しました)を正常に実行するのに役立ちました: Angular 4アプリケーション開発Bootstrap 4とTypeScript



0

これで、ionic-nativeモジュールは必要なくなりました。@ ionic-native / coreだけが必要です。走る

npm uninstall ionic-native --save

それはあなたの問題を解決します。



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"

-3

はい、問題はTypeScript 2.4.1にありました。これをコントロールパネルからアンインストールしただけです。VisualStudio 2017には既にインストールされているので、問題なく機能します。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.