Different types require individual declarations for their private properties

Question

Different types require individual declarations for their private properties

While immersing myself in learning Angular, a TypeScript-based framework, I encountered an intriguing error:

The class 'SnackbarService' is mistakenly extending the base class 'MatSnackBar'. There are separate declarations for types of a private property '_overlay'.

This error revealed itself as I attempted to extend MatSnackBar from @angular/material.

Here's the snippet of my code causing this issue:

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

I would greatly appreciate any assistance or insights on why this is happening. Thank you!

javascript typescript

Answer 1

Answer №1

The reason for this issue is that by specifying the constructor to accept a private _overlay parameter, you inadvertently created a new instance of _overlay, which conflicts with the one already defined in the base class MatSnackBar.

To resolve this, simply remove the private keyword from the parameter declaration and inherit it from the base class instead. Repeat this for any other constructor parameters as well.

export class SnackbarService extends MatSnackBar{

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

You will still be able to access these parameters using this.

Answer 2

The reason for this issue is that by specifying the constructor to accept a private _overlay parameter, you inadvertently created a new instance of _overlay, which conflicts with the one already defined in the base class MatSnackBar.

To resolve this, simply remove the private keyword from the parameter declaration and inherit it from the base class instead. Repeat this for any other constructor parameters as well.

export class SnackbarService extends MatSnackBar{

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

You will still be able to access these parameters using this.

Answer 3

Answer №2

In situations like this, discrepancies in dependencies' versions can cause issues. [Taking into account the perspective of Typescript]

For instance, if your application X is using version 1.0 of a package Y, and also version 1.0 of package Z. However, package Z relies on a different version of package Y, let's say version 2.0.

This results in having two distinct classes with identical names throughout the overall building process. To resolve this issue, it is essential to either upgrade package Z or upgrade package Y, in order to ensure consistency in versions across the entire application.

Answer 4

In situations like this, discrepancies in dependencies' versions can cause issues. [Taking into account the perspective of Typescript]

For instance, if your application X is using version 1.0 of a package Y, and also version 1.0 of package Z. However, package Z relies on a different version of package Y, let's say version 2.0.

This results in having two distinct classes with identical names throughout the overall building process. To resolve this issue, it is essential to either upgrade package Z or upgrade package Y, in order to ensure consistency in versions across the entire application.

Answer 5

Answer №3

As a newcomer, I wasn't able to comment on the previous answer. I also share the opinion that using 'protected' instead of 'private' is a better approach for this particular scenario, rather than simply removing the modifier. When dealing with a parent class and wanting its properties/methods to be accessible to the child class, it's best to use protected.

https://www.typescriptlang.org/docs/handbook/classes.html#understanding-protected

One question in the comments was about why using protected resolves the issue. The link above provides an explanation (albeit simplified). It involves how access modifiers impact property inheritance differently. Hopefully, this sheds some light on the conceptual reasoning behind it.

Because private declarations are specific to a class, they cannot be inherited by child classes, resulting in duplication of properties when merging the child and parent objects (leading to errors).

Using protected ensures that the variable is inherited by the child class, allowing them to share the same variable. Even if the child redeclares the variable, it is simply merged with the inherited one in the final object. This offers the same non-public benefits while maintaining inheritance within the derived class.

Answer 6

As a newcomer, I wasn't able to comment on the previous answer. I also share the opinion that using 'protected' instead of 'private' is a better approach for this particular scenario, rather than simply removing the modifier. When dealing with a parent class and wanting its properties/methods to be accessible to the child class, it's best to use protected.

https://www.typescriptlang.org/docs/handbook/classes.html#understanding-protected

One question in the comments was about why using protected resolves the issue. The link above provides an explanation (albeit simplified). It involves how access modifiers impact property inheritance differently. Hopefully, this sheds some light on the conceptual reasoning behind it.

Because private declarations are specific to a class, they cannot be inherited by child classes, resulting in duplication of properties when merging the child and parent objects (leading to errors).

Using protected ensures that the variable is inherited by the child class, allowing them to share the same variable. Even if the child redeclares the variable, it is simply merged with the inherited one in the final object. This offers the same non-public benefits while maintaining inheritance within the derived class.

Different types require individual declarations for their private properties

Answer №1

Answer №2

Answer №3

Similar questions

Guide to excluding all subdependencies using webpack-node-externals

Changing an Array into JSON format using AngularJS

Conquering cross-origin resource sharing (CORS) using XMLHttpRequest without relying on JSONP

I'm interested in learning how to send JSON in HTTP GET parameters using express and Node. Can you provide some guidance on

Display the following information as you iterate through an array in TypeScript within a React component

"Is there a way to update the value of a variable within $scope when a specific action

Is it possible to modify the class within TypeScript code while utilizing the CSS library for styling?

Can anyone provide guidance on incorporating lodash into an Ionic 2 project?

Why is Jquery's .addClass and .removeClass not functioning as expected?

What is the best way to access the ngModel value from an input tag within an AngularJS4 component?

Identify a click event on a sortable element that has been dynamically added using the

Strategies for successfully sharing MongoDB database connections between routes in NodeJS

When the text exceeds the space available, it will automatically flow into a new column in lower

How can dynamic x and y values be used to create moving waves on Canvas in HTML5?

Best Method for Confirming Deletion in Data Table with Shadow and UI

A function with a specific name for sorting a multidimensional object based on a specified sub-key's value, without anonymity

Combining union types with partial types in TypeScript: A guide

Failed to pass through invalid parameters "recordIds", "datasources" while navigating in VUE

Leveraging moment.format Function in Angular within an HTML Context

Combine two arrays into one