When an abstract method is invoked within the constructor of an abstract class, it does not have access to properties of

Question

When an abstract method is invoked within the constructor of an abstract class, it does not have access to properties of

This code snippet is supposed to display 'Hello World!' on the screen, but instead it shows an error message:

Error: Cannot read property 'id' of undefined

. What could be the reason behind this issue?

abstract class Parent {
  constructor() {
    console.log(this.getData());
  }

  abstract getData(): string;
}

class Child extends Parent {
  constructor(private item: any) {
    super();
  }

  getData(): string {
    return this.item.id;
  }
}

new Child({id: 'Hello World!'});

Click here for a functional example.

typescript

Answer 1

Answer №1

The issue lies in the sequence of events where the call to getData is made within the Parent constructor prior to the assignment of the parameter item to the private field item. This occurs because the automatic initialization happens after the super() call, and not before it. Please refer to the "***" comments for clarification:

abstract class Parent {
  constructor() {
    console.log(this.getData());  // *** Calls Child's getData
  }

  abstract getData(): string;
}

class Child extends Parent {
  constructor(private item: any) {
    super();                       // *** Calls Parent's constructor
    // ** Automatic initialization takes place here, *after* the `super()` call
  }

  getData(): string {
    return this.item.id;           // *** Therefore, `this.item` becomes `undefined` at this point
  }
}

new Child({id: 'Hello World!'});

This highlights one of the reasons why invoking methods from constructors may not be considered best practice: They are subject to being overridden by child classes, but the initialization of the child class may not yet be complete (as seen in this case).

Answer 2

The issue lies in the sequence of events where the call to getData is made within the Parent constructor prior to the assignment of the parameter item to the private field item. This occurs because the automatic initialization happens after the super() call, and not before it. Please refer to the "***" comments for clarification:

abstract class Parent {
  constructor() {
    console.log(this.getData());  // *** Calls Child's getData
  }

  abstract getData(): string;
}

class Child extends Parent {
  constructor(private item: any) {
    super();                       // *** Calls Parent's constructor
    // ** Automatic initialization takes place here, *after* the `super()` call
  }

  getData(): string {
    return this.item.id;           // *** Therefore, `this.item` becomes `undefined` at this point
  }
}

new Child({id: 'Hello World!'});

This highlights one of the reasons why invoking methods from constructors may not be considered best practice: They are subject to being overridden by child classes, but the initialization of the child class may not yet be complete (as seen in this case).

When an abstract method is invoked within the constructor of an abstract class, it does not have access to properties of

Answer №1

Similar questions

Enhance JSON for efficiency in Typescript Mapping

Organize by a collection of strings or a collection of enums

When canActivate returns false, the screen in Angular 2 will still be accessed

What is the best way to incorporate CSS from node_modules into Vite for production?

Exploring the world of Unicode in Angular

Creating a generic class in Typescript that can only accept two specific types is a powerful

What is the best way to retrieve paginated data from a simulated JSON server (json-server)?

What is the best way to inject a service instance into the implementation of an abstract method?

Every time you try to import a config.json file in Typescript, it never fails

The input 'Query' cannot be matched with the type '[(options?: QueryLazyOptions<Exact<{ where?:"

Issue with dispatching actions in React using TypeScript and hooks

Session is not functioning properly as anticipated

angular displaying incorrect values for counter

Error involving ESLint detecting unused variables within a TypeScript generic type

How to display an object in the template that does not have a specified property

Steps for generating a fresh type denotation from a value within an object

Exploring the Depths of JSON Arrays within Typescript

Enhance your material-ui component using TypeScript functionality

Placing options and a clickable element within a collapsible navigation bar

I am hoping to refresh my data every three seconds without relying on the react-apollo refetch function