Erro rxjs / Subject.d.ts: A classe 'Subject <T>' estende incorretamente a classe base 'Observable <T>'

89

Extraí um código de modelo de amostra deste tutorial e executei as duas etapas abaixo para começar -

  1. npm install // worked fine and created node_modules folder with all dependencies
  2. npm start // falhou com o erro abaixo-

    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

Vejo que na declaração de levantamento subject.d.ts é como abaixo -

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

E em Observable.ts é definido como abaixo-

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

Nota: - 1. Eu sou novo no Angular2 e estou tentando controlar as coisas.

  1. O erro pode ser devido a definições incompatíveis de método de elevação

  2. Eu li este tópico do github

  3. Se eu precisar instalar alguma versão diferente do rxjs, diga como desinstalar e instalar o rxjs correto.

Edit1: posso demorar um pouco para responder aqui, mas ainda recebo o mesmo erro mesmo depois de usar o typescript 2.3.4 ou rxjs 6 alpha . Abaixo está meu 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"
  }
}
Deepak S
fonte
Isso parece ter sido corrigido em [email protected] .

Respostas:

70

De acordo com isso, você precisa atualizar o typescript 2.3.4 ou rxjs 6 alpha

Vá para o seu arquivo package.json no seu script de atualização do projeto ou versão rxjs. Exemplo

"typescript": "2.3.4"

Faz npm install

atualização (29/06/2017): -

De acordo com o "2.4.0"trabalho datilografado dos comentários .

CharanRoot
fonte
6
"typescript": "^2.3.4"corresponderá a 2.4.1 e 2.4 é a versão que expõe o problema com RxJS.
cartant
5
A versão datilografada substituída para "2.4.0" funcionou para mim.
Ajax
1
Segundo que tem que ser exatamente "2.3.4" - "^ 2.3.4" não funcionou para mim.
maia
1
combinação de "typescript": "2.3.0"e "rxjs": "5.4.1"funcionou para mim
ericdemo07
@Jonnysai desculpe, retiro o que disse. Projeto compilado, mas recebi um erro de tempo de execução e fiz downgrade para 2.3.4. Mais aqui: stackoverflow.com/a/44556137
Carcamano
25

Como outros apontaram, este problema surgiu como consequência da verificação de tipo mais rigorosa de genéricos introduzida no TypeScript 2.4. Isso expôs uma inconsistência em uma definição de tipo RxJS e, consequentemente, foi corrigido na versão RxJS 5.4.2 . Portanto, a solução ideal é apenas atualizar para 5.4.2.

Se você, por algum motivo, não puder atualizar para 5.4.2, deve usar a solução de Alan Haddad de aumentar a declaração de tipo para corrigi-la em seu próprio projeto. Ou seja, adicione este snippet ao seu aplicativo:

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

Sua solução não deixará outros efeitos colaterais e, portanto, é excelente. Alternativamente, as soluções propostas têm mais efeitos colaterais para a configuração do seu projeto e, portanto, são menos ideais:

  • desative as verificações genéricas mais rígidas com o sinalizador do compilador --noStrictGenericChecks. No entanto, isso o tornará menos estrito para seu próprio aplicativo, o que você pode fazer, mas pode introduzir definições de tipo inconsistentes como fez nesta instância RxJS que, por sua vez, pode introduzir mais bugs em seu aplicativo.
  • Não verificar os tipos nas bibliotecas com o sinalizador --skipLibCheck definido como verdadeiro. Isso também não é ideal, pois você pode não obter alguns erros de tipo relatados.
  • Atualizando para RxJS 6 Alpha - considerando que há mudanças significativas, isso pode corromper seu aplicativo de maneiras mal documentadas, visto que ainda está em alfa. Além disso, se você tiver outras dependências como Angular 2+, essa pode não ser uma opção com suporte, quebrando o próprio framework agora ou no futuro. Acho que é um problema ainda mais difícil de resolver.
Koslun
fonte
24

Uma abordagem band-aid admitida é adicionar o seguinte ao seu arquivo tsconfig.json até que o pessoal do RxJS decida o que eles querem fazer sobre o erro ao usar o TypeScript 2.4.1:

"compilerOptions": {

    "skipLibCheck": true,

 }
user3785010
fonte
Obrigado por isso, funcionou. Eu tentei muitas outras coisas, mas acho que esse erro está relacionado com pacotes errados com a versão errada não são compatíveis uns com os outros ...
Salim
2
Acho que não é uma boa ideia desativar ou suprimir All LibCheck.
CharanRoot
Sugeri a mesma coisa sobre a questão
Sean Newell
@Jonnysai uma vez que você não possui esse código, suprimir a verificação de lib é bom a curto prazo, pois você pode arquivar problemas com as bibliotecas e, em seguida, continuar seu próprio trabalho de desenvolvimento. Você pode arquivar seu próprio problema e criar um link para o problema deles e, quando os tipos forem corrigidos, você poderá remover a supressão.
Sean Newell
6
A verdadeira solução não deve ser skipLibCheck. Se estiver fazendo isso, você está potencialmente superando outros problemas. A melhor solução é noStrictGenericChecksaté que o RxJS seja atualizado.
Daniel Rosenwasser
19

Você pode contornar temporariamente o problema usando o Aumento de Módulo

O código a seguir resolveu o problema para mim. Uma vez que o RxJS possui uma versão estável que não apresenta esse problema, ele deve ser removido.

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

Embora seja talvez irônico que o próprio RxJS faça uso tão intenso dessa técnica para descrever sua própria forma, ela é geralmente aplicável a uma série de problemas.

Embora certamente haja limites e arestas, parte do que torna essa técnica poderosa é que podemos usá-la para aprimorar as declarações existentes, tornando-as mais seguras para tipos, sem bifurcar e manter o arquivo inteiro.

Aluan Haddad
fonte
onde você adiciona ou importa este arquivo?
Dave
1
adicione-o em qualquer lugar em seu projeto de forma que ele seja selecionado pelo compilador. Se você estiver usando listas de arquivos explícitas, certifique-se de que estejam incluídas. Caso contrário, ele deve ser selecionado automaticamente, desde que não esteja acima do arquivo
tsconfig.json
2
Tentei fazer isso, pois parecia a coisa menos perturbadora a fazer. Funcionou bem.
Stephen Holt
1
Eu descobri como adicionar o arquivo - "import 'rxjs / Subject';" (sem o "de" ou chaves) em app.component.ts.
John Pankowicz
1
@JaredWhipple Esse é um problema sério e tem implicações muito mais do que apenas verificação de fontes. Você pode usar "paths"in tsconfig.jsonpara especificar explicitamente onde "rxjs"e "rxjs/*"deve resolver a verificação de tipo. No entanto, ter várias versões pode causar problemas de tempo de execução. Mesmo se você não usarinstanceof e outros testes semelhantes, seus departamentos podem ser menos baseados em princípios. A melhor coisa a fazer é abrir um problema com videogular2 sugerindo mudar RxJS para uma dependência de par.
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"
}

em package.json "rxjs": "^5.4.2", e "typescript": "^ 2.3.4", então npm install e ng servem para seu funcionamento.

Ketan Chaudhari
fonte
8

Apenas um pouco de detalhe, na tentativa de colocar meus dois centavos.

O problema surge quando atualizamos o Typescript para a versão mais recente, que agora era o TypeScript 2.4.1 , ["como amamos as atualizações :) "] e conforme mencionado por @ :) @Jonnysai em sua resposta e no link fornecido lá, há uma discussão detalhada sobre o problema e suas correções.

Então, o que funcionou para mim foi:
1. Eu tive que Un instalar typescript 2.4.1 primeiro, indo para Painel de Controle > Programas e Recursos ...
2. Instale, de novo, original datilografado 2.4.0 , e, em seguida, certifique-se, em package.jsonarquivo, você tem essa configuração, conforme mencionado aqui em um detalhe mais curto. Você pode baixar typescript 2.4.0 a partir daqui , para o Visual Studio 2015

insira a descrição da imagem aqui


Irfaan
fonte
Isso funcionou de forma muito simples, sem "soluções alternativas". Não tenho certeza se isso importa, mas meu rxjs era "5.0.1" e eu não mudei isso, mas tudo parece bem. Obrigado por seus dois centavos - isso me ajudou!
Tom A
Eu também tenho esse problema ao usar o Typescript 2.3.4. Portanto, não parece correto que o problema surja por causa da atualização para 2.4.1. O angular-cli atual instala 2.3.4 porque diz que requer <2.4.0.
John Pankowicz,
5

Você pode usar temporariamente o --noStrictGenericCheckssinalizador para contornar isso no TypeScript 2.4.

Isso está --noStrictGenericChecksna linha de comando ou apenas "noStrictGenericChecks": trueno "compilerOptions"campo em tsconfig.json.

Lembre-se de que o RxJS 6 terá isso corrigido.

Veja esta pergunta semelhante: Como faço para contornar este erro no RxJS 5.x no TypeScript 2.4?

Daniel Rosenwasser
fonte
onde você coloca a bandeira?
Dave
3

Altere a seguinte linha de Subject.d.tsarquivo:

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

para:

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

O tipo de retorno provavelmente deve ser em Observable<R>vez deObservable<T>

Massimiliano Kraus
fonte
3

Mantenha a opção noStrictGeneric verdadeira no arquivo tsconfig.config

{
    "compilerOptions": {
        "noStrictGenericChecks": true
    }
}
Jigar Tanna
fonte
3

Adicione "noStrictGenericChecks": true no arquivo tsconfig.json no nó "compilerOptions" conforme mostrado na imagem abaixo e compilar o aplicativo. Eu enfrentei o mesmo erro depois de adicionar este erro resolvido. insira a descrição da imagem aqui

Akshay Bagi
fonte
2

Encontrei o mesmo problema e o resolvi usando "rxjs": "5.4.1" , "typescript": "~ 2.4.0" e adicionando "noStrictGenericChecks": true em tsconfig.json.

Khachornchit Songsaen
fonte
1

RxJS 6 terá isso corrigido, mas como uma solução temporária, você pode usar o noStrictGenericChecks opção compilador.

Em tsconfig.json, coloque-o compilerOptionse defina-o como verdadeiro.

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

Na linha de comando é --noStrictGenericChecks .

Por que está acontecendo:

O TypeScript 2.4 tem uma alteração de rigidez e o Assunto não está se elevando para o Observável correto. A assinatura realmente deveria ter sido

(operador: Operador) => Observável

Isso será corrigido no RxJS 6.

Suresh Mediboyina
fonte
1

Vá para o arquivo Package.json e modifique a configuração abaixo

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

Vai funcionar

Rahul Sharma
fonte
0

Usar o acima exposto sozinho não ajudou, no entanto, usar a seguinte abordagem: Como faço para contornar este erro “Assunto incorretamente estende observável” no TypeScript 2.4 e RxJs 5

resolveu os problemas. Também é mencionado lá que o problema foi corrigido no RxJs 6, então esta é mais uma correção temporária, que me ajudou a executar com sucesso este ótimo exemplo (que compilou antes, mas deu o erro durante o tempo de carregamento): Desenvolvimento de aplicativo Angular 4 com Bootstrap 4 e TypeScript

Gil Shapir
fonte
0

reinstalando rxjs -> npm install rxjs @ 6 rxjs-compat @ 6 --save

Yakup Ad
fonte
0

Agora não precisamos do módulo nativo iônico - precisamos apenas @ nativo iônico / core. Corre

npm uninstall ionic-native --save

Isso vai resolver o seu problema ..

Shubham Pandey
fonte
0

apenas adicione

"noStrictGenericChecks": true

para o seu tsconfig.json

Miguel Afonso
fonte
0

obrigado a resposta do zmag e Rahul Sharma, funciona! @zmag @Rahul Sharma

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

meu problema é o seguinte:

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

Faça alterações como.

Vá para o arquivo Package.json e modifique a configuração abaixo

  "rxjs": "5.4.1",
  "typescript": "~2.4.0"
SageX
fonte
-3

sim, o problema era com o TypeScript 2.4.1 Acabei de desinstalar isso do painel de controle e funciona para mim como Visual Studio 2017 já tem isso.

Subhash Sharma
fonte