The property X within the ClassB type cannot be assigned to the identical property within the parent type ClassA

Question

The property X within the ClassB type cannot be assigned to the identical property within the parent type ClassA

I deal with the following set of Typescript classes:

Firstly, we have an abstract class

export abstract class MyAbstractClass {
    ...
}

Next is Class A which implements the methods from the abstract class

export ClassA extends MyAbstractClass {

    readonly MY_FIRST_CONST = 'blaa';
    readonly MY_SECOND_CONST = 'blaablaaa';

    ...
}

Then, there's class B which extends class A and aims to override the value of MY_FIRST_CONST. No other changes have been made in the implementation
```
export ClassB extends ClassA {

    readonly MY_FIRST_CONST = 'other blaa';
    readonly MY_SECOND_CONST = 'other blaablaaa';

    ...
}
```

When working on ClassB, I keep encountering the same error message at the line pertaining to MY_FIRST_CONST:

   Property 'MY_FIRST_CONST' in type 'ClassB' is not assignable to the same property in base type 'ClassA'.

The error states: Type ""other blaa"" is not assignable to type ""blaa"".

I'm puzzled by the occurrence of this error, especially since it doesn't occur with MY_SECOND_CONST. Any insights or ideas on how to resolve this?

angular typescript

Answer 1

Answer №1

You seem to be facing a design dilemma. The issue lies in the fact that you are attempting to override a readonly attribute in a subclass, which is not logically consistent.

If you intend for subclasses to have the ability to modify the value, then it should not be declared as readonly. On the other hand, if you do not want subclasses to change the value, then it should not have a different value in the subclass.

However, there may be a scenario where you want subclasses to define a value that remains unchangeable after instantiation. This can be achieved either through a proper constructor implementation or by utilizing getters:

Using a constructor:

export class ClassA extends MyAbstractClass {

  readonly foo;

  constructor(foo = 'foo') {
    super();
    this.foo = foo;
  }
}

export class B extends ClassA {

  constructor() {
    super('bar')
  }
}

Using getters:

export class ClassA extends MyAbstractClass {
  get foo() {
    return 'foo';
  }
}

export class B extends ClassA {
  get foo() {
    return 'bar';
  }
}

Answer 2

You seem to be facing a design dilemma. The issue lies in the fact that you are attempting to override a readonly attribute in a subclass, which is not logically consistent.

If you intend for subclasses to have the ability to modify the value, then it should not be declared as readonly. On the other hand, if you do not want subclasses to change the value, then it should not have a different value in the subclass.

However, there may be a scenario where you want subclasses to define a value that remains unchangeable after instantiation. This can be achieved either through a proper constructor implementation or by utilizing getters:

Using a constructor:

export class ClassA extends MyAbstractClass {

  readonly foo;

  constructor(foo = 'foo') {
    super();
    this.foo = foo;
  }
}

export class B extends ClassA {

  constructor() {
    super('bar')
  }
}

Using getters:

export class ClassA extends MyAbstractClass {
  get foo() {
    return 'foo';
  }
}

export class B extends ClassA {
  get foo() {
    return 'bar';
  }
}

Answer 3

Answer №2

Upon receiving that particular error message, it appears that the issue lies in how the compiler is interpreting the properties of your class A. It seems to be treating them as specific strings rather than just a generic string type, hence the error message indicating that the "string" is not compatible with the only allowable string value.

You can verify this by hovering over the property MY_FIRST_CONTS and observing that TypeScript is identifying the type as "blaa" instead of "string".

If we explicitly specify the types of MY_FIRST_CONTS and MY_SECOND_CONTS as string, the problem is resolved without any additional issues.

export abstract class MyAbstractClass {
}

class ClassA extends MyAbstractClass {
  readonly MY_FIRST_CONTS: string = 'blaa';
  readonly MY_SECOND_CONTS: string = 'blaablaaa';
}

class ClassB extends ClassA {
  readonly MY_FIRST_CONTS = 'other blaa';
  readonly MY_SECOND_CONTS = 'other blaablaaa';
}

Try it out on the TypeScript Playground

Answer 4

Upon receiving that particular error message, it appears that the issue lies in how the compiler is interpreting the properties of your class A. It seems to be treating them as specific strings rather than just a generic string type, hence the error message indicating that the "string" is not compatible with the only allowable string value.

You can verify this by hovering over the property MY_FIRST_CONTS and observing that TypeScript is identifying the type as "blaa" instead of "string".

If we explicitly specify the types of MY_FIRST_CONTS and MY_SECOND_CONTS as string, the problem is resolved without any additional issues.

export abstract class MyAbstractClass {
}

class ClassA extends MyAbstractClass {
  readonly MY_FIRST_CONTS: string = 'blaa';
  readonly MY_SECOND_CONTS: string = 'blaablaaa';
}

class ClassB extends ClassA {
  readonly MY_FIRST_CONTS = 'other blaa';
  readonly MY_SECOND_CONTS = 'other blaablaaa';
}

Try it out on the TypeScript Playground

Answer 5

Answer №3

The problem here lies in the design - it is crucial for class B to inherit from the base, in the same way that class A does.

Answer 6

The problem here lies in the design - it is crucial for class B to inherit from the base, in the same way that class A does.

The property X within the ClassB type cannot be assigned to the identical property within the parent type ClassA

Answer №1

Answer №2

Answer №3

Similar questions

Angular2 material dropdown menu

Conditional type in Typescript can be used to infer tuple types

Tips for splitting JSON objects into individual arrays in React

Is Angular 2 giving you trouble with the AoT compilation and module.id error?

Challenges with variable scopes and passing variables in Ionic 2 (Typescript)

How can the id from a post response be obtained in Angular 7 when using json-server?

Guide on validating multiple preselected checkboxes using Angular 8 reactive forms

ngClass with multiple conditions

Setting up an angular2 web application on an Nginx server and forwarding HTTP requests to the backend API for

Employing async/await for efficient data retrieval

Issue detected: Props that are of type Object/Array must utilize a factory function in order to provide the default value

Creating a unique Tag Name for Dynamic Components in Angular

Unable to assign unique identifiers to elements within a user interface framework

Exploring proactive search using RxJS Observable compared to Subject

Using Pipe directive in Angular 2 with ES5: Error - Directive annotation missing from constructor

Exploring TypeScript to get a ref with the Vue Composition API

What is the best way to compare dates for a deadline using Angular and CSS?

"Troubleshooting: Why Angular2's ngOnChanges is not triggering with array input

Personalized Carousel using Ng-Bootstrap, showcasing image and description data fields

Utilizing web components in React by solely relying on a CDN for integration