Les types ont des déclarations distinctes d'une propriété privée

Question

Je suis en train d'apprendre Angular (qui est écrit en TypeScript) et je suis tombé sur cette erreur :

La classe "SnackbarService" ne prolonge pas correctement la classe de base "MatSnackBar". Les types ont des déclarations distinctes d'une propriété privée "_overlay".

en essayant d'étendre MatSnackBar de @angular/material .

Voici mon code :

import { MatSnackBar } from '@angular/material';
import { Overlay } from '@angular/cdk/overlay';
import { LiveAnnouncer } from '@angular/cdk/a11y';
...

export class SnackbarService extends MatSnackBar {

  constructor(
    private _overlay: Overlay, 
    private _liveAnnouncer: LiveAnnouncer,
    ...
  ) {
    super(_overlay, _liveAnnouncer, ...);
    }
  }
}

Toute aide ou explication sur la raison pour laquelle cela se produit serait vraiment appréciée.

Answer 1

Cela se produit parce qu'en déclarant le constructeur comme prenant un private _overlay vous avez créé votre propre paramètre _overlay mais elle est déjà définie dans la classe de base. MatSnackBar .

Retirer le private de la déclaration et l'hériter de la classe de base. Faites de même pour les autres paramètres du constructeur.

export class SnackbarService extends MatSnackBar{

  constructor(
    _overlay: Overlay, 
    _liveAnnouncer: LiveAnnouncer,
    ...
  ) {
     super(_overlay, _liveAnnouncer, ...);
    }
  }
}

Vous pouvez toujours y accéder via this.

Answer 2

Cela se produit également dans les cas où la version des dépendances est erronée. [Du point de vue de la typographie]

Par exemple, si votre application A utilise la version 1.0 d'un paquet B et la version 1.0 du paquet C . Cependant, le paquet C utilise une version différente du paquet B disons 2.0.

Maintenant vous avez deux classes différentes avec le même nom dans le processus de construction global. Pour résoudre ce problème, vous devez mettre à jour le paquet C ou le paquet B, afin d'avoir la même version dans toute l'application.