web-dev-qa-db-fra.com

Erreur typographique: TS2314: Le type générique 'ElementRef <T, any>' nécessite 2 argument (s) de type

J'utilise un modèle Angular 5.x, mais je l'ai mis à niveau vers Angular 6 à l'aide de https://update.angular.io/ guide. Maintenant, j'ai cette erreur dans mon constructeur

TypeScript Error: TS2314: Generic type 'ElementRef<T, any>' requires 2 type argument(s)

Mon code: 

import { Component, Input, Output, EventEmitter, ElementRef, HostListener }          from '@angular/core';

@Component({
  selector: 'sidebar',
  templateUrl: './sidebar.component.html'
})

export class SidebarComponent {

    @HostListener('document:click', ['$event'])
  clickout(event) {
    if(!this.eRef.nativeElement.contains(event.target)) {
          this.hideMobileSidebar.emit(true);
    }
  }

  constructor(private eRef: ElementRef) {
  }

...

Je n'ai pas cette erreur dans la version précédente Angular version 5.

Quel était le changement? Je ne comprends pas les docs :( - https://angular.io/api/core/ElementRef

angulartypescriptcompiler-errorsangular6
3
FrancoVP

Je résous le problème.

Ce que j’ai fait, c’est d’exécuter npm i @angular-cli --save et la version 6.0.7 est passée de la version 6.0.7 à une version globale. Ensuite, je lance ng update @angular/cli mais cela ne change rien dans mon package.json. Maintenant, je peux utiliser ElementRef seul, ou ElementRef<HTMLElement> ou ElementRef<HTMLElement, any>, TOUT FONCTIONNE MAINTENANT. Je ne comprends pas ce que angular-cli a à voir avec mon installation tslint ou TypeScript, mais c'est la seule chose que j'ai faite. 

1
FrancoVP

Ils ont changé la propriété nativeElement de any à un type générique .

Si vous souhaitez corriger rapidement le problème, remplacez eRef: ElementRef par eRef: ElementRef<any>, qui est identique à celui des versions précédentes.

Cette modification signifie que vous pouvez maintenant définir le type de classe pour l'élément DOM référencé. Cela aidera la compilation TypeScript à appliquer ce type, ainsi que IDE fonctionnalités de complétion automatique.

Il existe de nombreux types de classes différents, mais la classe de base Element est utilisée pour la plupart des éléments DOM. Si vous savez que ce sera un élément <input>, vous pouvez utiliser HTMLInputElement à titre d'exemple.

Dans votre exemple, le composant injecte son élément DOM pour le constructeur. Ce qui serait un générique HTMLElement . Donc, le code serait mis à jour comme ceci:

constructor(private eRef: ElementRef<HTMLElement>) {
     const title = eRef.nativeRef.title;
     // ^^^ the above title property is now verified by TypeScript at compile-time
}
3
cgTag