Lỗi rxjs / Subject.d.ts: Lớp 'Chủ đề <T>' mở rộng sai lớp cơ sở 'Có thể quan sát được <T>'


89

Tôi đã trích xuất mã mẫu mẫu từ hướng dẫn này và thực hiện hai bước dưới đây để bắt đầu -

  1. npm install // worked fine and created node_modules folder with all dependencies
  2. npm start // không thành công với lỗi bên dưới-

    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

Tôi thấy rằng trong khai báo của subject.d.ts về mức tăng như sau:

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

Và trong Observable.ts, nó được định nghĩa như sau-

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

Lưu ý: - 1. Tôi mới sử dụng Angular2 và đang cố gắng nắm bắt mọi thứ.

  1. Lỗi có thể do các định nghĩa về phương pháp nâng không tương thích

  2. Tôi đã đọc qua chuỗi github này

  3. Nếu tôi cần cài đặt một số phiên bản rxjs khác thì vui lòng cho biết cách gỡ cài đặt và cài đặt đúng rxjs.

Chỉnh sửa1: Tôi có thể hơi muộn trong việc phản hồi ở đây nhưng tôi vẫn gặp lỗi tương tự ngay cả sau khi sử dụng typecript 2.3.4 hoặc rxjs 6 alpha . Dưới đây là package.json của tôi,

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



Điều này dường như đã được khắc phục trong rxjs@5.4.2 .

Câu trả lời:


70

Theo điều này, bạn cần cập nhật phiên bản phân loại 2.3.4 hoặc rxjs 6 alpha

đi đến tệp package.json của bạn trong bản cập nhật dự án hoặc phiên bản rxjs của bạn. Thí dụ

"typescript": "2.3.4"

làm npm install

cập nhật (29/06/2017): -

Theo cách viết bình luận hoạt "2.4.0"động.


6
"typescript": "^2.3.4"sẽ khớp với 2.4.1 và 2.4 là phiên bản cho thấy vấn đề với RxJS.
cartant

5
Phiên bản typecript được thay thế thành "2.4.0" phù hợp với tôi.
Ajax

1
Tôi thứ hai rằng nó phải chính xác là "2.3.4" - "^ 2.3.4" không hoạt động với tôi.
maia

1
sự kết hợp của "typescript": "2.3.0""rxjs": "5.4.1"làm việc cho tôi
ericdemo07

@Jonnysai xin lỗi, tôi rút lại những gì đã nói. Dự án đã được biên dịch, nhưng tôi gặp lỗi thời gian chạy và bị hạ cấp xuống 2.3.4. Thêm ở đây: stackoverflow.com/a/44556137
Carcamano

25

Như những người khác đã chỉ ra, vấn đề này xuất hiện do việc kiểm tra kiểu nghiêm ngặt hơn của các generic được giới thiệu trong TypeScript 2.4. Điều này cho thấy sự mâu thuẫn trong định nghĩa kiểu RxJS và do đó đã được sửa trong phiên bản RxJS 5.4.2 . Vì vậy, giải pháp lý tưởng là chỉ cần nâng cấp lên 5.4.2.

Nếu vì lý do nào đó bạn không thể nâng cấp lên 5.4.2, thay vào đó, bạn nên sử dụng giải pháp bổ sung khai báo kiểu của Alan Haddad để sửa chữa nó cho dự án của riêng bạn. Tức là thêm đoạn mã này vào ứng dụng của bạn:

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

Giải pháp của anh ấy sẽ không để lại tác dụng phụ nào khác và do đó tuyệt vời. Các giải pháp được đề xuất khác có nhiều tác dụng phụ hơn đối với thiết lập dự án của bạn và do đó ít lý tưởng hơn:

  • tắt các kiểm tra chung nghiêm ngặt hơn với cờ trình biên dịch --noStrictGenericChecks. Tuy nhiên, điều này sẽ làm cho ứng dụng của bạn bớt nghiêm ngặt hơn, điều này bạn có thể làm, nhưng có thể đưa ra các định nghĩa kiểu không nhất quán như đã làm trong phiên bản RxJS này, do đó có thể tạo ra nhiều lỗi hơn trong ứng dụng của bạn.
  • Không kiểm tra các loại trong thư viện có cờ --skipLibCheck được đặt thành true. Điều này cũng không phải là lý tưởng vì bạn có thể không nhận được một số lỗi loại được báo cáo.
  • Nâng cấp lên RxJS 6 Alpha - do có những thay đổi đột ngột, điều này có thể phá vỡ ứng dụng của bạn theo những cách được ghi nhận không tốt, vì nó vẫn ở giai đoạn alpha. Ngoài ra, nếu bạn có các phụ thuộc khác như Angular 2+, đây có thể không thực sự là một tùy chọn được hỗ trợ, phá vỡ chính khung ngay bây giờ hoặc xuống dòng. Mà tôi nghĩ là một vấn đề thậm chí còn khó giải quyết hơn.

24

Một cách tiếp cận hỗ trợ băng tần được thừa nhận là thêm phần sau vào tệp tsconfig.json của bạn cho đến khi những người RxJS quyết định họ muốn làm gì với lỗi khi sử dụng TypeScript 2.4.1:

"compilerOptions": {

    "skipLibCheck": true,

 }

Cảm ơn vì điều này, nó đã hoạt động. Tôi đã thử rất nhiều thứ khác nhưng tôi đoán lỗi này liên quan đến các gói sai với phiên bản sai không hỗ trợ nhau ...
Salim

2
Tôi nghĩ không phải là một ý kiến ​​hay nếu tắt hoặc tắt Tất cả LibCheck.
CharanRoot

Tôi đề nghị điều tương tự trên vấn đề github
Sean Newell

@Jonnysai vì bạn không sở hữu mã đó nên việc kiểm tra lib bằng cách sử dụng lệnh là tốt trong thời gian ngắn hạn vì bạn có thể giải quyết các vấn đề với thư viện và sau đó tiếp tục công việc phát triển của riêng bạn. Bạn có thể gửi vấn đề của riêng mình và liên kết đến vấn đề của họ và khi các loại của chúng được khắc phục, bạn có thể tắt tính năng này.
Sean Newell

6
Giải pháp thực sự không nên như vậy skipLibCheck. Nếu bạn đang làm điều đó, bạn có thể đang nhìn thấy những vấn đề khác. Giải pháp tốt hơn là noStrictGenericCheckscho đến khi RxJS được cập nhật.
Daniel Rosenwasser

19

Bạn có thể tạm thời khắc phục sự cố bằng cách sử dụng Tăng cường mô-đun

Đoạn mã sau đã giải quyết vấn đề cho tôi. Sau khi RxJS có một bản phát hành ổn định không có vấn đề này, nó nên được gỡ bỏ.

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

Mặc dù có lẽ thật mỉa mai khi chính RxJS sử dụng nhiều kỹ thuật này để mô tả hình dạng của chính nó, nhưng nó thực sự có thể áp dụng chung cho một loạt các vấn đề.

Mặc dù chắc chắn có những giới hạn và các cạnh thô, nhưng một phần của điều làm cho kỹ thuật này trở nên mạnh mẽ là chúng ta có thể sử dụng nó để nâng cao các khai báo hiện có, làm cho chúng trở nên an toàn hơn mà không cần phân nhánh và duy trì toàn bộ tệp.


bạn thêm hoặc nhập tệp này ở đâu?
Dave

1
thêm nó vào bất cứ đâu trong dự án của bạn để nó sẽ được trình biên dịch chọn. Nếu bạn đang sử dụng danh sách tệp rõ ràng, hãy đảm bảo rằng nó được bao gồm. Nếu không nó sẽ được tự động nhặt miễn là nó không phải trên file tsconfig.json
Aluan Haddad

2
Tôi đã thử điều này, vì nó có vẻ là điều ít gây gián đoạn nhất để làm. Làm việc tốt.
Stephen Holt

1
Tôi đã tìm ra cách thêm tệp - "import 'rxjs / Subject';" (không có "from" hoặc dấu ngoặc nhọn) trong app.component.ts.
John Pankowicz

1
@JaredWhipple Đó là một vấn đề nghiêm trọng và có liên quan đến nhiều thứ hơn là đánh máy. Bạn có thể sử dụng "paths"trong tsconfig.jsonđể chỉ định rõ ràng nơi "rxjs""rxjs/*"nên giải quyết lỗi đánh máy. Tuy nhiên, có nhiều phiên bản có thể gây ra các vấn đề về thời gian chạy. Ngay cả khi bạn không sử dụng instanceofvà các bài kiểm tra khác như vậy, nhiệm vụ của bạn có thể kém nguyên tắc hơn. Điều tốt nhất nên làm là mở một vấn đề với videogular2 đề xuất thay đổi RxJS thành phụ thuộc ngang hàng.
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"
}

trong package.json "rxjs": "^5.4.2","stylescript": "^ 2.3.4", sau đó npm installng phục vụ hoạt động của nó.


8

Chỉ là một chút chi tiết nhỏ, để cố gắng đưa vào hai xu của tôi.

Vấn đề nảy sinh khi chúng tôi nâng cấp Typecript lên phiên bản mới nhất, lúc này là TypeScript 2.4.1 , ["vì chúng tôi yêu thích các bản nâng cấp:)"], và như được đề cập bởi @ Jonnysai trong câu trả lời của anh ấy và liên kết được cung cấp ở đó, có một cuộc thảo luận chi tiết về vấn đề và các bản sửa lỗi của nó.

Vì vậy, những gì làm việc đối với tôi là:
1. Tôi phải Un cài đặt nguyên cảo 2.4.1 đầu tiên, bằng cách vào Control Panel > Programs and Features ...
2. Cài đặt, lại lần nữa, nguyên cảo 2.4.0 , và sau đó đảm bảo, trong package.json, bạn có cấu hình này , như đã đề cập ở đây trong một chi tiết khá ngắn gọn. Bạn có thể tải xuống TypeScript 2.4.0 từ đây , dành cho Visual Studio 2015

nhập mô tả hình ảnh ở đây



Điều này hoạt động rất đơn giản mà không có "giải pháp thay thế". Tôi không chắc điều này có quan trọng nhưng rxjs của tôi là "5.0.1" và tôi đã không thay đổi điều đó, mặc dù vậy tất cả đều có vẻ ổn. Cảm ơn vì hai xu của bạn - nó đã giúp tôi!
Tom A,

Tôi cũng gặp vấn đề này bằng cách sử dụng Typescript 2.3.4. Vì vậy, có vẻ như vấn đề phát sinh do nâng cấp lên 2.4.1 có vẻ không đúng. Hiện tại angle-cli cài đặt 2.3.4 vì nó yêu cầu <2.4.0.
John Pankowicz

5

Bạn có thể tạm thời sử dụng --noStrictGenericChecks cờ để giải quyết vấn đề này trong TypeScript 2.4.

Đây là --noStrictGenericChecksdòng lệnh hoặc chỉ "noStrictGenericChecks": truetrong "compilerOptions"trường trongtsconfig.json .

Hãy nhớ rằng, RxJS 6 sẽ sửa lỗi này.

Xem câu hỏi tương tự này: Làm cách nào để khắc phục lỗi này trong RxJS 5.x trong TypeScript 2.4?


bạn cắm cờ ở đâu?
Dave

3

Vui lòng thay đổi dòng sau của Subject.d.tstệp:

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

đến:

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

Kiểu trả về có lẽ Observable<R>phải làObservable<T>


3

Giữ tùy chọn noStrictGeneric đúng trong tệp tsconfig.config

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

3

Thêm "noStrictGenericChecks": true trong tệp tsconfig.json dưới nút "compilerOptions" như được hiển thị trong hình ảnh và ứng dụng xây dựng bên dưới. Tôi đã gặp phải lỗi tương tự sau khi thêm lỗi này đã được giải quyết. nhập mô tả hình ảnh ở đây


2

Tôi đã tìm thấy vấn đề tương tự và tôi đã giải quyết nó bằng cách sử dụng "rxjs": "5.4.1" , "stylescript": "~ 2.4.0" và thêm "noStrictGenericChecks": true vào tsconfig.json.


1

RxJS 6 sẽ sửa lỗi này, nhưng như một giải pháp tạm thời, bạn có thể sử dụng noStrictGenericChecks tùy chọn trình biên dịch.

Vào tsconfig.json, đặt nó vào compilerOptionsvà đặt nó thành true.

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

Trên dòng lệnh, nó --noStrictGenericChecks .

Tại sao nó xảy ra:

TypeScript 2.4 có sự thay đổi về độ nghiêm ngặt và Chủ đề không được nâng lên thành Có thể quan sát chính xác. Chữ ký thực sự nên được

(operator: Toán tử) => Có thể quan sát được

Điều này sẽ được khắc phục trong RxJS 6.


1

Đi tới tệp Package.json và sửa đổi cấu hình bên dưới

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

Nó sẽ hoạt động


0

Tuy nhiên, chỉ sử dụng cách trên không giúp được gì khi sử dụng cách tiếp cận sau: Làm cách nào để khắc phục lỗi “Đối tượng mở rộng không chính xác có thể quan sát được” trong TypeScript 2.4 và RxJs 5

đã giải quyết các vấn đề. Nó cũng được đề cập ở đó rằng vấn đề đã được khắc phục trong RxJs 6, vì vậy đây chỉ là một bản sửa lỗi tạm thời, giúp tôi chạy thành công ví dụ tuyệt vời này (được biên dịch trước đó nhưng đã xảy ra lỗi trong thời gian tải): Phát triển ứng dụng Angular 4 với Bootstrap 4 và TypeScript



0

Bây giờ chúng ta không cần mô-đun ionic-native - chúng ta chỉ cần @ ionic-native / core. Chạy

npm uninstall ionic-native --save

Nó sẽ giải quyết vấn đề của bạn ..



0

cảm ơn câu trả lời của zmag và Rahul Sharma, nó hoạt động! @zmag @Rahul Sharma

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

vấn đề của tôi là như sau:

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

Thực hiện các thay đổi như.

Đi tới tệp Package.json và sửa đổi cấu hình bên dưới

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

-3

vâng, vấn đề là với TypeScript 2.4.1 Tôi vừa gỡ cài đặt cái này khỏi Control panel và nó hoạt động với tôi vì Visual Studio 2017 đã có cái này.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.