Using Typescript to Modify Parent Class Properties in Child Class

Question

Using Typescript to Modify Parent Class Properties in Child Class

Consider this scenario:

class Parent {
    propStr = "Hello";
    propNum = 42;

    constructor(propShared) {
        console.log(this.propStr); // Hello
        console.log(this.propNum); // 42
        console.log(propShared); // w/e
    }
}

class Child extends Parent {
    propStr = "Hi"; // overridden
    propNum = 1337; // overridden

    constructor(propShared) {
        super(propShared);
    }
}

let c = new Child("Foobar");

What steps should be taken to ensure that the parent properties are correctly overridden, resulting in the console.log displaying the child's properties?

javascript typescript inheritance overriding es6-class

Answer 1

Answer №1

When logging properties from the parent constructor, they are displayed before any potential child constructor code modifications take place. It is important to remember that initialization should occur within the constructor without executing any side effects:

class Parent {
    propStr = "Hello";
    propNum = 42;

    log() {
        console.log(this.propStr);
        console.log(this.propNum);
    }
}

class Child extends Parent {
    propStr = "Hi"; // overridden
    propNum = 1337; // overridden
}

const c = new Child("Foobar");
c.log()

If you need initialization to be based on external factors or child classes, consider making them parameters with default values:

class Parent {
    constructor(propStr = "Hello", propNum = 42, propShared) {
        this.propStr = propStr;
        this.propNum = propNum;
        this.propShared = propShared;
    }
    log() {
        console.log(this.propStr);
        console.log(this.propNum);
        console.log(this.propShared);
    }   
}

class Child extends Parent {
    constructor(propShared) {
        super("Hi", 1337, propShared);
    }
}

const c = new Child("Foobar");
c.log();

Answer 2

When logging properties from the parent constructor, they are displayed before any potential child constructor code modifications take place. It is important to remember that initialization should occur within the constructor without executing any side effects:

class Parent {
    propStr = "Hello";
    propNum = 42;

    log() {
        console.log(this.propStr);
        console.log(this.propNum);
    }
}

class Child extends Parent {
    propStr = "Hi"; // overridden
    propNum = 1337; // overridden
}

const c = new Child("Foobar");
c.log()

If you need initialization to be based on external factors or child classes, consider making them parameters with default values:

class Parent {
    constructor(propStr = "Hello", propNum = 42, propShared) {
        this.propStr = propStr;
        this.propNum = propNum;
        this.propShared = propShared;
    }
    log() {
        console.log(this.propStr);
        console.log(this.propNum);
        console.log(this.propShared);
    }   
}

class Child extends Parent {
    constructor(propShared) {
        super("Hi", 1337, propShared);
    }
}

const c = new Child("Foobar");
c.log();

Answer 3

Answer №2

Another approach is to utilize a getter. This way, the parent constructor will access the value defined in the child.

class Mother {
    get message: string {
      return "Greetings"
    }
}

class Offspring extends Mother {
    get message: string {
      return "Salutations"
    }
}

Answer 4

Another approach is to utilize a getter. This way, the parent constructor will access the value defined in the child.

class Mother {
    get message: string {
      return "Greetings"
    }
}

class Offspring extends Mother {
    get message: string {
      return "Salutations"
    }
}

Answer 5

Answer №3

If you're working with typescript, you might find the feature of typescript known as Parameter Properties helpful:

class Parent {
    constructor(public propStr = "Hello", public propNum = 42, public propShared: any) {
        console.log(this.propStr); // Hello
        console.log(this.propNum); // 42
        console.log(this.propShared); // w/e
    }
}

class Child extends Parent {
    constructor(propShared: any) {
        super("Hi", 1337, propShared);
    }
}

let c = new Child("Foobar");

You'll get the expected output by using this code.

Answer 6

If you're working with typescript, you might find the feature of typescript known as Parameter Properties helpful:

class Parent {
    constructor(public propStr = "Hello", public propNum = 42, public propShared: any) {
        console.log(this.propStr); // Hello
        console.log(this.propNum); // 42
        console.log(this.propShared); // w/e
    }
}

class Child extends Parent {
    constructor(propShared: any) {
        super("Hi", 1337, propShared);
    }
}

let c = new Child("Foobar");

You'll get the expected output by using this code.

Using Typescript to Modify Parent Class Properties in Child Class

Answer №1

Answer №2

Answer №3

Similar questions

Retrieve the JSON object with an AJAX request that contains three arrays, then transfer these arrays to JavaScript

What are some ways to restrict the number of words per line?

"Exploring the relationship between Typescript and Angular: transforming variables within different

I'm having trouble pinpointing the issue in my code

Navigate to the specified location using AJAX

Creating separate UI-views using ui-router within a single module

Transforming a React application from ES6 hooks to Class-based components

Watchable: Yield the outcome of a Promise as long as watching continues

Consistent value displayed by addEventListener for each event

What is the best way to include an item in a list with a specific identifier using the useState Record data type in a React application built with TypeScript?

Provide specific labeling for the y-axis on AM charts

Trouble retrieving an array within a nested immutable object

How can I add a comma after every third number in a react component?

AngularJS - Error in ui.calendar: Trying to access the length property of an undefined variable leads to a TypeError

Utilize JSON data in d3.js for creating a scatterplot visualization

Bootstrap Modal for WooCommerce

Halt of dispatcher playback occurs after a duration of 10 minutes with discord.js

The state object in Redux Toolkit remains static, resulting in the error message "Uncaught TypeError: Cannot assign to read only property 'property-name' of object '#<Object>'"

Kohana ajax causing removal of JQuery Data attributes

"Utilizing Typescript with Angular NGRX, the actions$.pipe() method can lead to