Tips for effectively overriding a method in typescript

Question

Tips for effectively overriding a method in typescript

Why is this.fullName appearing empty in the show() method?

class Person {
  protected name: string = "";
  constructor(name: string) {
    this.makeSir(name);
  }

  makeSir(name: string) {
    this.name = "sir" + name;  
  }
}

class Man extends Person {
  protected fullName = "";
  constructor(name: string) {
    super(name);
  }

  makeSir(name: string) {
    super.makeSir(name);
    this.fullName = "***" + name;
    console.log(this.fullName);//[LOG]: "***john" 
  }

  show() {
    console.log(this.fullName);//[LOG]: "" 
  }
}


const man = new Man("john");
man.show();

What steps can be taken to resolve this issue?

typescript inheritance this

Answer 1

Answer №1

super() is always the first function called when creating a subclass like your Man. It runs before any variable assignments, such as protected fullName = ''. So, while you're setting fullName in Man.makeSir, the empty string assignment overrides it right after.

To prevent this from happening, you can avoid giving an initial value to fullName:

// specify a type without assigning an initial value
// use '!' syntax to indicate to TypeScript that this will be initialized in the constructor
// even if TS cannot deduce that itself
protected fullName!: string;

By not setting an "initial" value for fullName, you preserve the changes made by the super() call.

Answer 2

super() is always the first function called when creating a subclass like your Man. It runs before any variable assignments, such as protected fullName = ''. So, while you're setting fullName in Man.makeSir, the empty string assignment overrides it right after.

To prevent this from happening, you can avoid giving an initial value to fullName:

// specify a type without assigning an initial value
// use '!' syntax to indicate to TypeScript that this will be initialized in the constructor
// even if TS cannot deduce that itself
protected fullName!: string;

By not setting an "initial" value for fullName, you preserve the changes made by the super() call.

Answer 3

Answer №2

class Individual  {
    
protected identity: String ="";
    
    constructor(identity: string){
        this.assignTitle(identity);
    }
    
    assignTitle(identity: string){
        this.identity="sir"+identity ;
    }
    
    customFunction(){
        console.log("INDIVIDUAL");
    }
}

class Human extends Individual {
    public identity: string ="";
    
    constructor(identity:string){
        super(identity);
        this.assignTitle(identity);
    }
    
    assignTitle(identity:string){
        this.identity="####"+identity;
    }
    
    customFunction(){
        console.log("Human ")
    }
    displayInfo(){
        console.log("#####"+this.identity);
    }
}

const h = new Human("Being ")
h.displayInfo();
h.customFunction();


const i = new Individual("Special");
i.customFunction();

You are only invoking super in the constructor, which then calls the superclass constructor.

If you notice, the test function is properly overridden

Output:

#########Being 
Human 
INDIVIDUAL

Answer 4

class Individual  {
    
protected identity: String ="";
    
    constructor(identity: string){
        this.assignTitle(identity);
    }
    
    assignTitle(identity: string){
        this.identity="sir"+identity ;
    }
    
    customFunction(){
        console.log("INDIVIDUAL");
    }
}

class Human extends Individual {
    public identity: string ="";
    
    constructor(identity:string){
        super(identity);
        this.assignTitle(identity);
    }
    
    assignTitle(identity:string){
        this.identity="####"+identity;
    }
    
    customFunction(){
        console.log("Human ")
    }
    displayInfo(){
        console.log("#####"+this.identity);
    }
}

const h = new Human("Being ")
h.displayInfo();
h.customFunction();


const i = new Individual("Special");
i.customFunction();

You are only invoking super in the constructor, which then calls the superclass constructor.

If you notice, the test function is properly overridden

Output:

#########Being 
Human 
INDIVIDUAL

Tips for effectively overriding a method in typescript

Answer №1

Answer №2

Similar questions

Tailoring Aurelia for .cshtml integration

Angular2/Typescript: Transforming a Javascript/Typescript Date into a C# DateTime string on the client side

What is the best way to dynamically add data to a JSON file?

Is it possible to use TypeScript or Angular to disable or remove arrow key navigation from a PrimeNG Table programmatically?

What is the proper way to supply a header parameter in Angular?

The Dilemma of using forRoot() in Angular 2/4+ Shared Modules

Issue: Unable to link to 'FormGroup' because it is not recognized as a valid property of 'form'

Insert the object into a designated location within a multi-dimensional array

Mocking a common function in a shared service using Typescript and Jest

Steps for displaying detailed information about a single product on an Ecommerce page

Struggling to properly test the functionality of my NgForm call in Angular2+

Using Typescript and JSX to render a component that has been passed as an argument

Unique text: "Singleton React component"

Issues with Next.js and Framer Motion

The Enum object in TypeScript has not been declared or defined

The error TS2339 is indicating that there is no property called myProperty on the type SetStateAction<User>

Filtering based on the boolean value of a checkbox in Angular

Obtain the combination of values within an array object

Preventing image flickering in SvelteKit: A guide

Can you provide guidance on defining functions using standard syntax and incorporating children in React with TypeScript?