rxjs / Subject.d.ts error: Kelas 'Subjek <T>' salah memperluas kelas dasar 'Dapat diamati <T>'

Saya mengekstrak kode contoh template dari tutorial ini dan melakukan dua langkah di bawah ini untuk memulai -

1. npm install // worked fine and created node_modules folder with all dependencies

2. npm start // gagal dengan kesalahan di bawah ini-

   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
   

Saya melihat bahwa di subject.d.ts declaration of lift adalah seperti di bawah ini -

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

Dan di Observable.ts itu didefinisikan sebagai di bawah ini-

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

Catatan: - 1. Saya baru mengenal Angular2 dan mencoba memahami berbagai hal.

2. Kesalahan mungkin disebabkan oleh definisi metode pengangkatan yang tidak kompatibel

3. Saya membaca utas github ini

4. Jika saya perlu menginstal beberapa versi rxjs yang berbeda, mohon beri tahu cara menghapus dan menginstal rxjs yang benar.

Sunting1: Saya mungkin agak terlambat dalam menanggapi di sini tapi saya masih mendapatkan kesalahan yang sama bahkan setelah menggunakan skrip 2.3.4 atau rxjs 6 alpha . Di bawah ini adalah package.json saya,

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

Untuk itu, Anda perlu memperbarui skrip tipe 2.3.4 atau rxjs 6 alpha

buka file package.json Anda di versi skrip atau rxjs pembaruan proyek Anda. Contoh

"typescript": "2.3.4"

melakukan npm install

update (06/29/2017): -

Sesuai dengan naskah komentar yang "2.4.0"bekerja.

Seperti yang ditunjukkan orang lain, masalah ini muncul sebagai konsekuensi dari pemeriksaan jenis generik yang lebih ketat yang diperkenalkan di TypeScript 2.4. Ini memperlihatkan ketidakkonsistenan dalam definisi tipe RxJS dan akibatnya diperbaiki dalam RxJS versi 5.4.2 . Jadi solusi ideal adalah dengan meningkatkan ke 5.4.2.

Jika karena alasan tertentu Anda tidak dapat memutakhirkan ke 5.4.2, Anda sebaiknya menggunakan solusi Alan Haddad untuk menambah deklarasi tipe guna memperbaikinya untuk proyek Anda sendiri. Yaitu menambahkan cuplikan ini ke aplikasi Anda:

// 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>;
  }
}

Solusinya tidak akan meninggalkan efek samping lain dan dengan demikian hebat. Solusi alternatif yang diusulkan memiliki lebih banyak efek samping untuk pengaturan proyek Anda dan karenanya kurang ideal:

• matikan pemeriksaan umum yang lebih ketat dengan flag compiler --noStrictGenericChecks. Namun ini akan membuatnya kurang ketat untuk aplikasi Anda sendiri, yang dapat Anda lakukan, tetapi mungkin memperkenalkan definisi jenis yang tidak konsisten seperti yang terjadi dalam contoh RxJS ini yang pada gilirannya mungkin memperkenalkan lebih banyak bug di aplikasi Anda.
• Tidak memeriksa tipe di perpustakaan dengan flag --skipLibCheck disetel ke true. Ini juga tidak ideal karena Anda mungkin tidak mendapatkan beberapa jenis kesalahan yang dilaporkan.
• Mengupgrade ke RxJS 6 Alpha - mengingat bahwa ada perubahan yang mengganggu, hal ini mungkin merusak aplikasi Anda dengan cara yang terdokumentasi dengan buruk, karena masih dalam alfa. Selain itu, jika Anda memiliki dependensi lain seperti Angular 2+, ini mungkin bukan opsi yang didukung, merusak kerangka itu sendiri sekarang atau di masa mendatang. Yang menurut saya merupakan masalah yang lebih sulit untuk dipecahkan.

Pendekatan bantuan pita yang diakui adalah menambahkan yang berikut ini ke file tsconfig.json Anda sampai orang-orang RxJS memutuskan apa yang ingin mereka lakukan tentang kesalahan saat menggunakan TypeScript 2.4.1:

"compilerOptions": {

    "skipLibCheck": true,

 }

Anda dapat mengatasi masalah untuk sementara dengan menggunakan Augmentasi Modul

Kode berikut menyelesaikan masalah saya. Setelah RxJS memiliki rilis stabil yang tidak menunjukkan masalah ini, RxJS harus dihapus.

// 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>;
  }
}

Meskipun mungkin ironis bahwa RxJS sendiri menggunakan teknik ini untuk mendeskripsikan bentuknya sendiri secara berlebihan, namun sebenarnya secara umum dapat diterapkan pada berbagai masalah.

Meskipun pasti ada batasan dan tepi kasar, bagian dari apa yang membuat teknik ini kuat adalah bahwa kita dapat menggunakannya untuk meningkatkan deklarasi yang ada sehingga membuat mereka lebih aman dalam mengetik tanpa bercabang dan memelihara seluruh file.

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

di package.json "rxjs": "^5.4.2", dan "typescript": "^ 2.3.4", lalu npm install dan ng berfungsi .

Sedikit detail, dalam upaya memasukkan dua sen saya.

Masalah muncul ketika kita mengupgrade Typecript ke versi terbaru, yang sekarang adalah TypeScript 2.4.1 , ["karena kami menyukai upgrade :) "], dan seperti yang disebutkan oleh @ Jonnysai dalam jawabannya dan tautan yang disediakan di sana, ada diskusi mendetail tentang masalah dan perbaikannya.

Jadi, apa yang bekerja untuk saya adalah:
1. Saya harus Un menginstal naskah 2.4.1 pertama, dengan pergi ke Control Panel > Program dan Fitur ...
2. Instal, lagi, naskah 2.4.0 , dan kemudian memastikan, di package.jsonfile, Anda memiliki konfigurasi ini , seperti yang disebutkan di sini dalam detail yang lebih singkat. Anda dapat mengunduh TypeScript 2.4.0 dari sini , untuk Visual Studio 2015

Anda sementara dapat menggunakan --noStrictGenericChecksbendera untuk menyiasati ini di TypeScript 2.4.

Ini ada --noStrictGenericChecksdi baris perintah, atau hanya "noStrictGenericChecks": truedi "compilerOptions"bidang di tsconfig.json.

Perlu diingat, RxJS 6 akan memperbaikinya.

Lihat pertanyaan serupa ini: Bagaimana cara mengatasi kesalahan ini di RxJS 5.x di TypeScript 2.4?

Harap ubah baris Subject.d.tsfile berikut :

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

untuk:

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

Jenis pengembalian mungkin lebih Observable<R>baik daripadaObservable<T>

Pertahankan opsi noStrictGeneric benar di file tsconfig.config

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

Tambahkan "noStrictGenericChecks": true dalam file tsconfig.json di bawah node "compilerOptions" seperti yang ditunjukkan pada gambar & aplikasi build di bawah ini. Saya menghadapi kesalahan yang sama setelah menambahkan kesalahan ini diselesaikan.

Saya menemukan masalah yang sama dan saya menyelesaikannya dengan menggunakan "rxjs": "5.4.1" , "typescript": "~ 2.4.0" dan menambahkan "noStrictGenericChecks": true ke tsconfig.json.

RxJS 6 akan memperbaikinya, tetapi sebagai solusi sementara, Anda dapat menggunakan noStrictGenericChecksopsi compiler.

Masukkan tsconfig.json, masukkan compilerOptionsdan setel ke true.

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

Pada baris perintah itu --noStrictGenericChecks.

Mengapa ini terjadi:

TypeScript 2.4 memiliki perubahan ketelitian, dan Subjek tidak mengangkat ke Observable yang benar. Tanda tangan itu seharusnya

(operator: Operator) => Dapat diamati

Ini akan diperbaiki di RxJS 6.

Pergi ke file Package.json dan ubah konfigurasi di bawah ini

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

Ini akan berhasil

Namun, menggunakan di atas saja tidak membantu, menggunakan pendekatan berikut: Bagaimana cara mengatasi kesalahan "Subjek salah memperluas Observable" ini di TypeScript 2.4 dan RxJs 5

memecahkan masalah. Juga disebutkan di sana bahwa masalah telah diperbaiki di RxJs 6, jadi ini lebih merupakan perbaikan sementara, yang membantu saya berhasil menjalankan contoh hebat ini (yang dikompilasi sebelumnya tetapi memberikan kesalahan selama waktu pemuatan): Pengembangan aplikasi Angular 4 dengan Bootstrap 4 dan TypeScript

menginstal ulang rxjs -> npm install rxjs @ 6 rxjs-compat @ 6 --save

Sekarang kita tidak membutuhkan modul ionic-native - kita hanya membutuhkan @ ionic-native / core. Lari

npm uninstall ionic-native --save

Ini akan memecahkan Masalah Anda ..

tambahkan saja

"noStrictGenericChecks": true

ke tsconfig.json Anda

terima kasih jawaban zmag dan rahul sharma, berhasil! @agussari

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

masalah saya adalah sebagai berikut:

typings/globals/core-js/index.d.ts:3:14 - error TS2300: Duplicate identifier

Lakukan perubahan sebagai.

Pergi ke file Package.json dan ubah konfigurasi di bawah ini

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

ya masalahnya adalah dengan TypeScript 2.4.1 Saya baru saja menghapus instalan ini dari panel Kontrol dan berfungsi untuk saya karena Visual Studio 2017 sudah memiliki ini.