web-dev-qa-db-ja.com

TypeScript 2.4およびRxJS 5.xでこの「サブジェクトが誤ってObservableを拡張する」エラーを回避するにはどうすればよいですか？

コンパイルすると、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以前にダウングレードせずにこれを回避するにはどうすればよいですか？

typescriptrxjsrxjs5typescript2.4
47
Daniel Rosenwasser

解決

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です。

119
Daniel Rosenwasser

今日、このエラーに直面し、以下の3つのステップでこれを実際に解決しました。だから、同じことを希望と共有することは、他の人を助けるだろう。

ステップ1：package.jsonファイルで、エントリを「rxjs」：「5.4.2」として変更します。

ステップ2：ルートディレクトリにあるプロジェクトからnode_modulesフォルダーを削除します

ステップ3：次に、package.jsonファイルを右クリックし、次のように復元をクリックします。 enter image description here

注：新しいファイルで再びnode_moduleフォルダーを作成します。ソリューションをビルドします。上記の問題に関連するビルドエラーが発生しないことを願っています。

13
Karthik Elumalai

追加

"noStrictGenericChecks": true

tsconfig.jsonファイル内

12
shaishav shukla

Package.jsonファイルに以下の2つの変更を加えました。

1）依存関係セクションのrxjsバージョンを5.4.1に変更しました。

「依存関係」：{
"rxjs"： "5.4.1"}

2） devDependenciesセクションのTypeScriptバージョンを2.4.0に変更しました。

"devDependencies"：{"TypeScript"： "2.4.0"}

2つの変更を行った後、「npm install」コマンドを実行し、機能しました。

7
Krishna

Subjectクラス：

この行を変更します。

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

に：

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

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バージョンの変更。

1
Sumant Singh

これは、rxjsとtypescriptの不一致の問題です。 "rxjs"を使用すると： "5.4.2"と "TypeScript"： "〜2.3.4"が機能します

1
Yue Yin

私は同じ問題にぶつかり、次のWebサイトが役立つことを発見しました https://www.georgephillipson.com/blog/jquery/setting-up-angular-2-in-visual-studio-2017/ it MVC WebサイトのAngularを設定する手順をステップごとに説明し、この投稿が参照しているエラーの修正方法と、完全なコードを含むGitHubへのリンクを説明しました。

私はそれが役に立つと思ったので、他の人に知らせると思った

Zoesの投稿に従って、リンクが役立つと思う理由をさらに追加しました

このページでは、RxJSを更新してエラーを修正する方法、NodeおよびNPMがコンピューターにインストールされているかどうかを確認する方法、TypeScriptを追加する方法、cshtmlを設定する方法を示します。 Angularコンテンツを表示するファイル

enter image description here

0
Paul Thompson

Tsconfig.jsonで、それを「compilerOptions」に入れ、trueに設定します。

{
    "compilerOptions": true,
    "compilerOptions": {
        "noStrictGenericChecks": true
    }
}
0
Suraj