ข้อผิดพลาด rxjs / Subject.d.ts: คลาส 'Subject <T>' ขยายคลาสพื้นฐาน 'Observable <T>' อย่างไม่ถูกต้อง

ฉันแยกโค้ดเทมเพลตตัวอย่างจากบทช่วยสอนนี้และดำเนินการด้านล่างสองขั้นตอนเพื่อเริ่มต้น -

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 และพยายามยึดสิ่งต่างๆ

2. ข้อผิดพลาดอาจเกิดจากคำจำกัดความของวิธีการยกที่เข้ากันไม่ได้

3. ฉันอ่านกระทู้ Githubนี้

4. หากฉันต้องการติดตั้ง rxjs เวอร์ชันอื่นโปรดบอกวิธีถอนการติดตั้งและติดตั้ง rxjs ที่ถูกต้อง

Edit1: ฉันอาจจะสายไปนิดในการตอบสนองที่นี่ แต่ฉันยังคงได้รับข้อผิดพลาดเดียวกันแม้หลังจากใช้typescript 2.3.4หรือrxjs 6 อัลฟา ด้านล่างนี้คือ 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"
  }
}

ตามนี้คุณต้องอัปเดต typescript 2.3.4 หรือ rxjs 6 alpha

ไปที่ไฟล์ package.json ของคุณในประเภทการอัปเดตโปรเจ็กต์ของคุณหรือเวอร์ชัน rxjs ตัวอย่าง

"typescript": "2.3.4"

ทำ npm install

อัพเดท (29/06/2560): -

ตามความคิดเห็น typescript "2.4.0"ทำงาน

ในขณะที่คนอื่น ๆ ได้ชี้ให้เห็นว่าปัญหานี้เกิดขึ้นจากการตรวจสอบชนิดที่เข้มงวดขึ้นของยาชื่อสามัญที่นำมาใช้ใน 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+ สิ่งนี้อาจไม่ใช่ตัวเลือกที่รองรับจริงๆทำลายกรอบตัวเองในตอนนี้หรือลงจากบรรทัด ซึ่งฉันคิดว่าเป็นปัญหาที่ยากกว่าในการแก้ไข

แนวทางการช่วยเหลือวงดนตรีที่ยอมรับคือการเพิ่มสิ่งต่อไปนี้ลงในไฟล์ tsconfig.json ของคุณจนกว่าผู้ใช้ RxJS จะตัดสินใจว่าพวกเขาต้องการทำอะไรเกี่ยวกับข้อผิดพลาดเมื่อใช้ TypeScript 2.4.1:

"compilerOptions": {

    "skipLibCheck": true,

 }

คุณสามารถแก้ไขปัญหาชั่วคราวได้โดยใช้การเพิ่มโมดูล

รหัสต่อไปนี้ช่วยแก้ปัญหาให้ฉันได้ เมื่อ 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 เองก็ใช้เทคนิคนี้อย่างหนักเพื่ออธิบายรูปร่างของมันเอง แต่โดยทั่วไปแล้วมันสามารถใช้ได้กับปัญหาต่างๆ

แม้ว่าจะมีข้อ จำกัด และขอบขรุขระอย่างแน่นอน แต่ส่วนหนึ่งของสิ่งที่ทำให้เทคนิคนี้มีประสิทธิภาพคือเราสามารถใช้เพื่อปรับปรุงการประกาศที่มีอยู่ทำให้ประเภทนี้ปลอดภัยมากขึ้นโดยไม่ต้องใช้ส้อมและดูแลไฟล์ทั้งหมด

"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 ติดตั้งและNG ทำหน้าที่การทำงานของตน

รายละเอียดเล็กน้อยในความพยายามที่จะใส่สองเซ็นต์ของฉัน

ปัญหาเกิดขึ้นเมื่อเราอัปเกรดtypescriptเป็นเวอร์ชันล่าสุดซึ่งตอนนี้คือTypeScript 2.4.1 ["ในขณะที่เราชอบการอัปเกรด:) "] และตามที่ @ Jonnysaiกล่าวไว้ในคำตอบของเขาและลิงก์ที่ให้ไว้มี การอภิปรายโดยละเอียดเกี่ยวกับปัญหาและการแก้ไข

สิ่งที่ได้ผลสำหรับฉันคือ
1. ฉันต้องยกเลิกการติดตั้ง TypeScript 2.4.1ก่อนโดยไปที่แผงควบคุม > โปรแกรมและคุณสมบัติ ...
2. ติดตั้งใหม่อีกครั้งTypeScript 2.4.0จากนั้นตรวจสอบให้แน่ใจในpackage.jsonแฟ้มคุณมีนี้กำหนดค่าเป็นที่กล่าวถึงที่นี่ในรายละเอียดค่อนข้างสั้น คุณสามารถดาวน์โหลดtypescript 2.4.0จากที่นี่ , สำหรับ Visual Studio 2015

คุณสามารถใช้ไฟล์ --noStrictGenericChecksแฟล็กเพื่อหลีกเลี่ยงสิ่งนี้ใน TypeScript 2.4

อยู่--noStrictGenericChecksในบรรทัดคำสั่งหรือ"noStrictGenericChecks": trueใน"compilerOptions"ช่องในtsconfig.json .

โปรดทราบว่า RxJS 6 จะได้รับการแก้ไข

ดูคำถามที่คล้ายกันนี้: ฉันจะแก้ไขข้อผิดพลาดนี้ใน RxJS 5.x ใน TypeScript 2.4 ได้อย่างไร

กรุณาเปลี่ยนSubject.d.tsไฟล์บรรทัดต่อไปนี้:

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

ถึง:

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

ประเภทผลตอบแทนควรจะเป็นObservable<R>มากกว่าObservable<T>

ให้อ็อพชัน noStrictGeneric เป็นจริงในไฟล์ tsconfig.config

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

เพิ่ม"noStrictGenericChecks": trueในไฟล์tsconfig.jsonภายใต้โหนด"compilerOptions"ดังที่แสดงใน image & build application ด้านล่าง ฉันพบข้อผิดพลาดเดียวกันหลังจากที่แก้ไขข้อผิดพลาดนี้แล้ว

ฉันพบปัญหาเดียวกันและแก้ไขโดยใช้"rxjs": "5.4.1" , "typescript": "~ 2.4.0"และเพิ่ม"noStrictGenericChecks": trueลงใน tsconfig.json

RxJS 6 จะได้รับการแก้ไข แต่เป็นวิธีแก้ปัญหาชั่วคราวคุณสามารถใช้ไฟล์ noStrictGenericChecksตัวเลือกคอมไพเลอร์ได้

ในtsconfig.jsonใส่ไว้ในcompilerOptionsและตั้งค่าให้เป็นจริง

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

ในบรรทัดคำสั่งคือ --noStrictGenericChecksในบรรทัดคำสั่งมัน

เหตุใดจึงเกิดขึ้น:

TypeScript 2.4 มีการเปลี่ยนแปลงความเข้มงวดและ Subject ไม่ได้ถูกยกไปยัง Observable ที่ถูกต้อง ลายเซ็นควรจะเป็นจริงๆ

(ตัวดำเนินการ: Operator) => สังเกตได้

สิ่งนี้จะได้รับการแก้ไขใน RxJS 6

ไปที่ไฟล์ Package.json และแก้ไขการกำหนดค่าด้านล่าง

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

มันจะทำงาน

การใช้วิธีการข้างต้นเพียงอย่างเดียวไม่ได้ช่วย แต่การใช้แนวทางต่อไปนี้: ฉันจะแก้ไขข้อผิดพลาด "Subject ไม่ถูกต้องขยาย Observable" ใน TypeScript 2.4 และ RxJs 5 ได้อย่างไร

แก้ไขปัญหา นอกจากนี้ยังมีการกล่าวถึงว่าปัญหาได้รับการแก้ไขแล้วใน RxJs 6 ดังนั้นนี่จึงเป็นการแก้ไขชั่วคราวมากกว่าซึ่งช่วยให้ฉันสามารถเรียกใช้ตัวอย่างที่ยอดเยี่ยมนี้ได้สำเร็จ (ซึ่งคอมไพล์ก่อนหน้านี้ แต่ให้ข้อผิดพลาดระหว่างโหลด): การพัฒนาแอปพลิเคชัน Angular 4 ด้วย Bootstrap 4 และ TypeScript

การติดตั้ง rxjs ใหม่ -> npm ติดตั้ง rxjs @ 6 rxjs-compat @ 6 - บันทึก

ตอนนี้เราไม่ต้องการโมดูลไอออนิกเนทีฟ - เราต้องการ @ ไอออนิกเนทีฟ / คอร์เท่านั้น วิ่ง

npm uninstall ionic-native --save

มันจะแก้ปัญหาของคุณ..

เพียงแค่เพิ่ม

"noStrictGenericChecks": true

ของคุณ tsconfig.json

ขอบคุณคำตอบของ zmag และ Rahul Sharma มันใช้งานได้! @zmag @ ราหุลชาร์มา

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

ใช่ปัญหาเกิดขึ้นกับ TypeScript 2.4.1 ฉันเพิ่งถอนการติดตั้งสิ่งนี้จากแผงควบคุมและใช้ได้กับฉันเนื่องจาก Visual Studio 2017 มีสิ่งนี้อยู่แล้ว