Lädt...


🔧 Understanding This and Super in Typescript


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

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();

Image description

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.

Image description

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.

...

🔧 A.I. Chat with your TypeScript Class (Every TypeScript Classes can be Super A.I. Chatbot)


📈 23.71 Punkte
🔧 Programmierung

🔧 A.I. Chat with your TypeScript Class (Every TypeScript Classes can be Super A.I. Chatbot)


📈 23.71 Punkte
🔧 Programmierung

🔧 Understanding This and Super in Typescript


📈 22.69 Punkte
🔧 Programmierung

📰 Super Mario All-Stars 2: Sammlung mit Super Mario 64, Super Mario Galaxy und mehr geplant?


📈 19.35 Punkte
📰 IT Nachrichten

📰 Super Nintendo Classic Mini: Super klein und super viel Spaß


📈 19.35 Punkte
📰 IT Nachrichten

📰 Geforce RTX 4080 Super, 4070 Ti Super und 4070 Super: Release soll in drei Etappen erfolgen [Gerücht]


📈 19.35 Punkte
📰 IT Nachrichten

📰 Gerüchte sind komplett: Das sind RTX 4070 Super, RTX 4070 Ti Super & RTX 4080 Super


📈 19.35 Punkte
📰 IT Nachrichten

📰 Nvidia GeForce: RTX 4070 Super, 4070 Ti Super und 4080 Super sind offiziell


📈 19.35 Punkte
📰 IT Nachrichten

📰 Neue Grafikkarten: Nvidia präsentiert GeForce RTX 4080 Super, 4070 Ti Super und 4070 Super


📈 19.35 Punkte
📰 IT Nachrichten

📰 Nvidia stellt GeForce RTX 4080 Super, 4070 TI Super und 4070 Super vor


📈 19.35 Punkte
📰 IT Nachrichten

🎥 I Don’t Know What to Say… – Nvidia RTX 4070 Super, 4070 Ti Super, 4080 Super Review


📈 19.35 Punkte
🎥 Video | Youtube

🔧 Why you should learn TypeScript and ditch JavaScript? TypeScript vs JavaScript


📈 18.48 Punkte
🔧 Programmierung

🔧 10 typescript developers you must follow to become typescript expert in 2024


📈 17.26 Punkte
🔧 Programmierung

🔧 I made "TypeScript Swagger Editor", new type of Swagger UI writing TypeScript code in the browser


📈 17.26 Punkte
🔧 Programmierung

🔧 How Types Work in TypeScript – Explained with JavaScript + TypeScript Code


📈 17.26 Punkte
🔧 Programmierung

🔧 Introduction to TypeScript — What is TypeScript?


📈 17.26 Punkte
🔧 Programmierung

🔧 Getting Started with TypeScript: A Quick Introduction From JavaScript to TypeScript!


📈 17.26 Punkte
🔧 Programmierung

🔧 TypeScript ✔ vs JavaScript ❌ : How TypeScript Outshines JavaScript


📈 17.26 Punkte
🔧 Programmierung

🔧 TypeScript ✔ vs JavaScript ❌ : How TypeScript Outshines JavaScript


📈 17.26 Punkte
🔧 Programmierung

🔧 TypeScript ✔ vs JavaScript ❌ : How TypeScript Outshines JavaScript


📈 17.26 Punkte
🔧 Programmierung

🔧 TypeScript Syntax Rules: Mastering TypeScript by Applying These Rules


📈 17.26 Punkte
🔧 Programmierung

🔧 From JavaScript to TypeScript: A Beginner’s Guide to TypeScript


📈 17.26 Punkte
🔧 Programmierung

🔧 Advanced TypeScript: A Deep Dive into Modern TypeScript Development


📈 17.26 Punkte
🔧 Programmierung

🔧 Understanding and Implementing Advanced Encryption Standard (AES) in Node.js with TypeScript


📈 16.24 Punkte
🔧 Programmierung

🔧 Understanding and Implementing Type Guards in TypeScript


📈 16.24 Punkte
🔧 Programmierung

🔧 Understanding Generic Classes in TypeScript: Flexible and Efficient Data Management


📈 16.24 Punkte
🔧 Programmierung

🔧 Understanding the Difference Between JavaScript and TypeScript


📈 16.24 Punkte
🔧 Programmierung

🔧 Understanding Types and Interfaces in TypeScript: A Comprehensive Guide


📈 16.24 Punkte
🔧 Programmierung

🔧 Understanding Props, Parent, and Child Components in React Native using TypeScript.


📈 16.24 Punkte
🔧 Programmierung

🔧 Understanding 'any', 'unknown', and 'never' in TypeScript


📈 16.24 Punkte
🔧 Programmierung

matomo