Understanding This and Super in Typescript

In Typescript, this and super are keywords used in object-oriented programming to refer to the current instance of a class and the base class, respectively.

---

This keyword

Definition: Refers to the current instance of the class.
Use Case:

• Access instance properties and methods.
• Call another method within the same class.
• Pass the current object as an argument

class Pizza {
    name: string

    constructor(name: string){
        this.name = name;
    }

    cook():void{
        console.log(`Start cooking ${this.name} pizza`)
    }
}

const pepperoniPizza = new Pizza("pepperoni");
pepperoniPizza.cook();

super keyword

• Definition: Refers to the base class (the parent class) of the current class.
• Use Cases:
  • Call the constructor of the base class.
  • Access methods and properties from the base class

Example:

class Animal {
    name: string;

    constructor(name: string) {
      this.name = name;
    }

    makeSound(): void {
      console.log(`${this.name} makes a sound.`);
    }
  }

  class Dog extends Animal {
    constructor(name: string) {
      super(name); // Calls the constructor of the base class
    }

    makeSound(): void {
      super.makeSound(); // Calls the base class method
      console.log(`${this.name} barks.`);
    }
  }

  const dog = new Dog("Buddy");
  dog.makeSound();

and the output include: makeSound() of Base Class is Animal and makeSound of subclass is Dog like this:

Buddy makes a sound.
Buddy barks.

---

Key Points:

1. this:

• Alway refers to the current instance
• Can be used in constructor, method, or arrow functions.
• In arrow functions, this is lexically bound to the surrounding context.

*2. super: *

• Can only be used in classes that extend another class.
• Must be called in the constructor before accessing this in a derived class.
• Can be used to call parent class methods.

class Parent {
  protected message: string = "Hello from Parent!";
}

class Child extends Parent {
  showMessage(): void {
    console.log(super.message); // Accesses the parent class property
  }
}

const child = new Child();
child.showMessage(); // Output: Hello from Parent!

By using this and super correctly, you can manage inheritance and object behavior effectively in Typescript.

The above is the detailed content of Understanding This and Super in Typescript. For more information, please follow other related articles on the PHP Chinese website!