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

90

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.

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

  2. Saya membaca utas github ini

  3. 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"
  }
}
angular  typescript  rxjs 
— Deepak S
sumber
3
— cartant
1
— Irfaan
Ini tampaknya telah diperbaiki di rxjs@5.4.2 .

Jawaban:

70

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.

— CharanRoot
sumber
6
"typescript": "^2.3.4"akan cocok dengan 2.4.1 dan 2.4 adalah versi yang menunjukkan masalah dengan RxJS.
— cartant
5
Mengganti versi skrip menjadi "2.4.0" berfungsi untuk saya.
— Ajax
1
Saya kedua bahwa itu harus tepat "2.3.4" - "^ 2.3.4" tidak berhasil untuk saya.
— maia
1
kombinasi "typescript": "2.3.0"dan "rxjs": "5.4.1"bekerja untuk saya
— ericdemo07
@Jonnysai maaf, saya menarik kembali apa yang saya katakan. Proyek dikompilasi, tetapi saya mendapat kesalahan runtime dan diturunkan ke 2.3.4. Selengkapnya di sini: stackoverflow.com/a/44556137
— Carcamano
25

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.
— Koslun
sumber
24

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,

 }
— pengguna3785010
sumber
Terima kasih untuk ini, ini berhasil. Saya mencoba banyak hal lain tetapi saya kira kesalahan ini terkait dengan paket yang salah dengan versi yang salah tidak mendukung satu sama lain ...
— Salim
2
Saya pikir bukan ide yang baik untuk menonaktifkan atau menekan Semua LibCheck.
— CharanRoot
Saya menyarankan hal yang sama tentang masalah github
— Sean Newell
@Jonnysai karena Anda tidak memiliki kode tersebut, menekan pemeriksaan lib tidak apa-apa dalam jangka pendek karena Anda dapat mengajukan masalah dengan pustaka, lalu melanjutkan pekerjaan pengembangan Anda sendiri. Anda dapat mengajukan masalah Anda sendiri dan menautkan ke masalah mereka, dan ketika tipenya diperbaiki, Anda dapat menghapus supresi.
— Sean Newell
6
Solusi nyata harus tidak menjadi untuk skipLibCheck. Jika Anda melakukan itu, Anda berpotensi mengatasi masalah lain. Solusi yang lebih baik adalah noStrictGenericCheckssampai RxJS diperbarui.
— Daniel Rosenwasser
19

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.

— Aluan Haddad
sumber
di mana Anda menambahkan atau mengimpor file ini?
— Dave
1
tambahkan di mana saja dalam proyek Anda sehingga akan diambil oleh kompiler. Jika Anda menggunakan daftar file eksplisit pastikan itu disertakan. Jika tidak, itu harus diambil secara otomatis selama tidak di atas file tsconfig.json
— Aluan Haddad
2
Saya mencoba ini, karena tampaknya hal yang paling tidak mengganggu untuk dilakukan. Bekerja dengan baik.
— Stephen Holt
1
Saya menemukan cara menambahkan file - "import 'rxjs / Subject';" (tanpa "dari" atau tanda kurung kurawal) di app.component.ts.
— John Pankowicz
1
@JaredWhipple Itu adalah masalah serius dan memiliki implikasi lebih dari sekadar pemeriksaan ketik. Anda dapat menggunakan "paths"in tsconfig.jsonuntuk secara eksplisit menentukan di mana "rxjs"dan "rxjs/*"harus menyelesaikan pemeriksaan ketik. Namun, memiliki beberapa versi cenderung menyebabkan masalah waktu proses. Bahkan jika Anda tidak menggunakan instanceofdan tes semacam itu, deps Anda mungkin kurang berprinsip. Hal terbaik untuk dilakukan adalah membuka masalah dengan videogular2 yang menyarankan untuk mengubah RxJS menjadi dependensi peer.
— 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"
}

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

— Ketan Chaudhari
sumber
8

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

masukkan deskripsi gambar di sini


— Irfaan
sumber
Ini bekerja sangat sederhana tanpa "solusi". Saya tidak yakin ini penting tetapi rxjs saya adalah "5.0.1" dan saya tidak mengubahnya, semua tampak baik-baik saja. Terima kasih untuk dua sen Anda - itu membantu saya!
— Tom A
Saya juga memiliki masalah ini menggunakan Typecript 2.3.4. Jadi sepertinya tidak benar bahwa masalah muncul karena mengupgrade ke 2.4.1. Angular-cli saat ini menginstal 2.3.4 karena dikatakan membutuhkan <2.4.0.
— John Pankowicz
3

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>

— Massimiliano Kraus
sumber
3

Pertahankan opsi noStrictGeneric benar di file tsconfig.config 

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

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. masukkan deskripsi gambar di sini

— Akshay Bagi
sumber
2

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.

— Khachornchit Songsaen
sumber
1

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.

— Suresh Mediboyina
sumber
1

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

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

Ini akan berhasil

— Rahul Sharma
sumber
0

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

— Gil Shapir
sumber
0

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

— Iklan Yakup
sumber
0

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

npm uninstall ionic-native --save

Ini akan memecahkan Masalah Anda ..

— Shubham Pandey
sumber
0

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"
— SageX
sumber
-3

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.

— Subhash Sharma
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.