web-dev-qa-db-ja.com

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

このチュートリアル からサンプルテンプレートコードを抽出し、以下の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. Angular 2に慣れていないので、問題を把握しようとしています。

  1. エラーはリフト方式の互換性のない定義が原因である可能性があります

  2. 私はこれを読みました github thread

  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"
  }
}
angulartypescriptrxjs
90
Deepak S

によると これ あなたはTypeScript 2.3.4かrxjs 6 alphaをアップデートする必要がある

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

"TypeScript": "2.3.4"

npm installをする

更新（2017/06/29）： -

コメントに従ってTypeScriptの"2.4.0"が動作します。

70
CharanRoot

他の人が指摘したように、この問題は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
Koslun

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

"compilerOptions": {

    "skipLibCheck": true,

 }
23
user3785010

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

確かに限界と大まかな境界がありますが、このテクニックを強力にすることの一部は、私たちがそれを使って既存の宣言を強化してファイル全体をフォークして維持することなくより安全にすることです。

19
Aluan Haddad
"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", and "TypeScript"： "^ 2.3.4"、 then npm install and ng serve =その作業.

9
Ketan Chaudhari

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

TypeScriptを最新のバージョンにアップグレードしたときに問題が発生します。最新のバージョンでは、 TypeScript 2.4.1 、["になります。彼の答えとそこに提供されているリンクの中で @ Jonnysai で述べられているように、問題とその修正に関して詳細な議論があります。

だから、私にとってうまくいったは次のとおりです。
1。私はninstallTypeScript 2.4.1最初に、 コントロールパネル> プログラムと機能...に移動して
2。 ---をインストールして、新しく、 TypeScript 2.4. にして、package.jsonファイルにこれがあることを確認してください。

enter image description here
設定、前述のとおり ここ 比較的短い詳細。

TypeScript 2.4. from ここ 、Visual Studio 2015用からダウンロードできます。

8
Irf

TypeScript 2.4ではこれを回避するために一時的に--noStrictGenericChecksフラグを使用することができます。

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

RxJS 6ではこれが修正されるでしょう。

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

5
Daniel Rosenwasser

下の画像のように"compilerOptions"ノードの下に"noStrictGenericChecks"：true in tsconfig.json fileを追加してください。私は解決されたこのエラーを追加した後に同じエラーに直面しました。 enter image description here

3
Akshay Bagi

Tsconfig.configファイルでnoStrictGenericオプションをtrueにしてください。

{
    "compilerOptions": {
        "noStrictGenericChecks": true
    }
}
3
Jigar Tanna

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

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

に：

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

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

3
user8709803

私は同じ問題を見つけ、"rxjs"： "5.4.1"、"TypeScript"： "〜2.4.0"を使ってそして"noStrictGenericChecks"：true tsconfig.jsonへ。

2
Khachornchit Songsaen

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

tsconfig.jsonでは、それをcompilerOptionsに入れてtrueに設定します。

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

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

なぜそれが起こっているのですか？

TypeScript 2.4では厳密性が変更されており、Subjectは正しいObservableに昇格していません。署名は本当にあったはずです

（演算子：演算子）=>観測可能

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

1
Suresh Mediboyina

追加するだけ

"noStrictGenericChecks": true

tsconfig.jsonへ

0
Miguel Afonso

上記を単独で使用しても、次のアプローチを使用しても役に立ちませんでした。 TypeScript 2.4およびRxJ 5で、この「サブジェクトが誤ってObservableを拡張する」エラーを回避する方法

問題を解決しました。この問題はRxJs 6で修正されているとも述べられているので、これは一時的な修正であり、この素晴らしい例をうまく実行するのに役立ちました（以前はコンパイルされていましたがロード時にエラーを出しました）： Bootstrap 4とTypeScriptを使ったAngular 4アプリケーションの開発

0
Gil Shapir

今私達はイオンネイティブモジュールを必要としない - 私達は@イオンネイティブ/ coreだけを必要とする。実行する

npm uninstall ionic-native --save

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

0
Shubham Pandey

rxjsの再インストール - > npm install rxjs @ 6 rxjs-compat @ 6 --save

0
Yakup Ad