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.