Types have separate declarations of a private property

I am learning Angular (which is written in TypeScript) and I stumbled upon this error:

Class 'SnackbarService' incorrectly extends base class 'MatSnackBar'.
Types have separate declarations of a private property '_overlay'.

when trying to extend MatSnackBar from @angular/material.

This is my 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, ...);
}
}
}


Any help with any type of explanation on why this happens would be really be appreciated.

This happens because by declaring the constructor as taking a private _overlay parameter, you have created your own _overlay, but that is already defined in the base class MatSnackBar.

Remove the private part from the declaration and inherit it from the base class. Do the same for the other constructor parameters.

export class SnackbarService extends MatSnackBar{

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


You can still access them via this.

Stack Overflow Q#49520047, score: 262