Błąd rxjs / Subject.d.ts: Klasa „Subject <T>” niepoprawnie rozszerza klasę bazową „Observable <T>”

Wyodrębniłem przykładowy kod szablonu z tego samouczka i wykonałem poniżej dwa kroki, aby rozpocząć -

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

2. npm start // nie powiodło się z poniższym błędem-

   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
   

Widzę że w temacie.d.ts deklaracja podniesienia jest jak poniżej -

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

A w Observable.ts jest zdefiniowane jak poniżej:

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

Uwaga: - 1. Jestem nowy w Angular2 i próbuję się opanować.

2. Błąd może wynikać z niezgodnych definicji metody podnoszenia

3. Przeczytałem ten wątek na githubie

4. Jeśli muszę zainstalować inną wersję rxjs, powiedz, jak odinstalować i zainstalować poprawną wersję rxjs.

Edit1: Mogę trochę spóźnić się z odpowiedzią tutaj, ale nadal pojawia się ten sam błąd, nawet po użyciu maszynopisu 2.3.4 lub rxjs 6 alpha . Poniżej znajduje się mój plik 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"
  }
}

W związku z tym potrzebujesz zaktualizować maszynopis 2.3.4 lub rxjs 6 alpha

przejdź do pliku package.json w swoim skrypcie maszynowym lub wersji rxjs. Przykład

"typescript": "2.3.4"

zrobić npm install

aktualizacja (29.06.2017): -

Zgodnie z "2.4.0"działającym maszynopisem komentarzy .

Jak inni zauważyli, ten problem powstał w wyniku ściślejszego sprawdzania typów typów ogólnych wprowadzonych w TypeScript 2.4. To ujawniło niespójność w definicji typu RxJS i zostało w konsekwencji naprawione w RxJS w wersji 5.4.2 . Idealnym rozwiązaniem jest więc aktualizacja do wersji 5.4.2.

Jeśli z jakiegoś powodu nie możesz zaktualizować do wersji 5.4.2, powinieneś zamiast tego użyć rozwiązania Alana Haddada polegającego na rozszerzeniu deklaracji typu, aby naprawić to we własnym projekcie. To znaczy dodaj ten fragment do swojej aplikacji:

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

Jego rozwiązanie nie pozostawi żadnych innych skutków ubocznych i dlatego jest świetne. Alternatywnie proponowane rozwiązania mają więcej skutków ubocznych dla konfiguracji projektu, a zatem są mniej idealne:

• wyłącz bardziej rygorystyczne kontrole ogólne z flagą kompilatora --noStrictGenericChecks. To jednak sprawi, że będzie mniej restrykcyjny dla Twojej własnej aplikacji, co możesz zrobić, ale może wprowadzić niespójne definicje typów, tak jak to miało miejsce w tej instancji RxJS, co z kolei może wprowadzić więcej błędów w Twojej aplikacji.
• Brak sprawdzania typów w bibliotekach z flagą --skipLibCheck ustawioną na true. To również nie jest idealne rozwiązanie, ponieważ niektóre błędy mogą nie zostać zgłoszone.
• Aktualizacja do RxJS 6 Alpha - biorąc pod uwagę, że istnieją istotne zmiany, może to spowodować uszkodzenie aplikacji w źle udokumentowany sposób, ponieważ nadal jest w wersji alfa. Dodatkowo, jeśli masz inne zależności, takie jak Angular 2+, może to nie być obsługiwana opcja, co może zepsuć samą strukturę teraz lub w dół. Myślę, że jest to jeszcze trudniejsze zagadnienie do rozwiązania.

Przyznanym podejściem pomocniczym jest dodanie następujących elementów do pliku tsconfig.json, dopóki ludzie z RxJS nie zdecydują, co chcą zrobić z błędem podczas korzystania z TypeScript 2.4.1:

"compilerOptions": {

    "skipLibCheck": true,

 }

Możesz tymczasowo obejść ten problem, używając rozszerzenia modułu

Poniższy kod rozwiązał problem za mnie. Gdy RxJS ma stabilną wersję, która nie wykazuje tego problemu, należy ją usunąć.

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

Chociaż być może ironią losu jest to, że sam RxJS tak intensywnie wykorzystuje tę technikę do opisania swojego własnego kształtu, w rzeczywistości ma ona ogólne zastosowanie do szeregu problemów.

Chociaż z pewnością istnieją ograniczenia i ostre krawędzie, częścią tego, co sprawia, że ​​ta technika jest potężna, jest to, że możemy jej użyć do ulepszenia istniejących deklaracji, dzięki czemu są bardziej bezpieczne bez rozwidlania i zachowują cały plik.

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

w package.json "rxjs": "^5.4.2", i "typescript": "^ 2.3.4", a następnie npm install i ng działają.

Tylko trochę szczegółów, próbując włożyć moje dwa centy.

Problem pojawia się, gdy uaktualnimy Typescript do najnowszej wersji, która była teraz TypeScript 2.4.1 , ["ponieważ uwielbiamy uaktualnienia :) "] i jak wspomniał @ Jonnysai w swojej odpowiedzi i podanym tam linku, jest szczegółowe omówienie problemu i jego poprawek.

Więc, co pracował dla mnie:
1. Musiałem Un zainstalować maszynopis 2.4.1 pierwsze, przechodząc do Panelu sterowania > Programy i funkcje ...
2. Zainstaluj, nowo, maszynopis 2.4.0 , a następnie upewnij się, w package.jsonplik, masz taką konfigurację, jak wspomniano tutaj w raczej krótszym szczególe. Można pobrać maszynopis 2.4.0 od tutaj , na Visual Studio 2015

Możesz tymczasowo użyć --noStrictGenericChecksflagi, aby obejść ten problem w TypeScript 2.4.

To jest --noStrictGenericChecksw wierszu poleceń lub po prostu "noStrictGenericChecks": truew "compilerOptions"polu w tsconfig.json.

Pamiętaj, że w RxJS 6 zostanie to poprawione.

Zobacz to podobne pytanie: Jak obejść ten błąd w RxJS 5.x w TypeScript 2.4?

Zmień następujący wiersz Subject.d.tspliku:

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

do:

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

Typ zwracany powinien Observable<R>raczej być niżObservable<T>

Pozostaw opcję noStrictGeneric true w pliku tsconfig.config

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

Dodaj „noStrictGenericChecks”: true w pliku tsconfig.json w węźle „compilerOptions”, jak pokazano na poniższym obrazku i zbuduj aplikację. Po dodaniu napotkałem ten sam błąd, rozwiązany.

Znalazłem ten sam problem i rozwiązałem go, używając "rxjs": "5.4.1" , "Typscript": "~ 2.4.0" i dodając "noStrictGenericChecks": true do tsconfig.json.

RxJS 6 będzie mieć to naprawione, ale jako tymczasowe obejście można użyć noStrictGenericChecksopcji kompilatora.

W tsconfig.json, włóż go compilerOptionsi ustaw na true.

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

W linii poleceń to --noStrictGenericChecks.

Dlaczego tak się dzieje:

TypeScript 2.4 ma zmianę ścisłości, a Subject nie jest podnoszony do prawidłowego Observable. Podpis naprawdę powinien

(operator: Operator) => Obserwowalne

Zostanie to naprawione w RxJS 6.

Przejdź do pliku Package.json i zmodyfikuj poniższą konfigurację

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

To będzie działać

Samo użycie powyższego nie pomogło jednak, stosując następujące podejście: Jak obejść ten błąd „Temat nieprawidłowo rozszerza Observable” w TypeScript 2.4 i RxJs 5

rozwiązał problemy. Wspomniano tam również, że problem został rozwiązany w RxJs 6, więc jest to raczej tymczasowa poprawka, która pomogła mi w pomyślnym uruchomieniu tego świetnego przykładu (który został skompilowany wcześniej, ale dał błąd podczas ładowania): Tworzenie aplikacji Angular 4 z Bootstrap 4 i TypeScript

ponowna instalacja rxjs -> npm install rxjs @ 6 rxjs -atible @ 6 --zapisz

Teraz nie potrzebujemy modułu ionic-native - potrzebujemy tylko @ ionic-native / core. Biegać

npm uninstall ionic-native --save

To rozwiąże Twój problem.

poprostu dodaj

"noStrictGenericChecks": true

do pliku tsconfig.json

dzięki odpowiedzi zmag i Rahul Sharma, działa! @zmag @Rahul Sharma

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

mój problem jest następujący:

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

Wprowadź zmiany jako.

Przejdź do pliku Package.json i zmodyfikuj poniższą konfigurację

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

tak, problem był z TypeScript 2.4.1 Właśnie odinstalowałem to z Panelu sterowania i działa dla mnie, ponieważ Visual Studio 2017 już to ma.