TypeScript this vs super Explained In Hindi

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

TypeScript एक powerful superset है JavaScript का, जो object-oriented programming (OOP) concepts जैसे classes, inheritance, और access modifiers को support करता है।

दो important keywords जो TypeScript में classes के साथ काफी use होते हैं, वो हैं this और super. यह दोनो keywords class के context में काफी useful होते हैं, लेकिन इनका use कैसे और कब करना चाहिए, यह समझना जरूरी है।

इस topic में हम this और super keywords के differences को examples के through देखेंगे कि किस context में कौनसा keyword use करना होता है।

●●●

What is this keyword ?

this keyword का use TypeScript (और JavaScript) में current object को refer करने के लिए किया जाता है। जब आप एक method या constructor के अंदर this का use करते हो, तो यह उस current instance को point करता है जिससे method call हो रही होती है।

Key Points About this -

• this हमेशा उस object को refer करता है जो current execution context में है।

• इसका current class के members (properties और methods) को access करने के लिए किया जाता है ।

• अगर आप this का use constructor में करते हैं, तो यह object कि properties को refer करेगा ।

this example in Class

Copy
class Person {
    name: string;
    constructor(name: string) {
        this.name = name;  // 'this' refers to the current instance of Person
    }
    greet() {
        console.log(`Hello, my name is ${this.name}`);  // Accessing 'name' via 'this'
    }
}

const person = new Person('John');
person.greet();  // Output: Hello, my name is John

यहां this.name का use Person class के current instance कि name property को refer कर रहा है।

जब हम greet() method call करते हैं, this.name उसी object कि property को refer करता है जिससे method call हो रही है, मतलब यह Person class के object को refer कर रहा है।

●●●

What is super keyword?

super keyword का use inheritance में होता है, जब एक class दूसरी class से extend करती है। super का primary काम होता है parent class के constructor या methods को call करना।

Key Points About super: -

जब एक class inherit(extends) होती है , तब super keyword parent class के constructor या methods को refer करता है।

super() का use parent class के constructor को call करने के लिए होता है।

Parent class के methods को भी super.methodName() के through call किया जा सकता है।

TypeScript super example

Copy
class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    makeSound() {
        console.log(`${this.name} is making a sound.`);
    }
}

class Dog extends Animal {
    constructor(name: string) {
        super(name);  // Calling parent class's constructor
    }
    bark() {
        console.log(`${this.name} is barking!`);
    }
}

const dog = new Dog('Buddy');
dog.makeSound();  // Output: Buddy is making a sound.
dog.bark();       // Output: Buddy is barking!

यहां Dog class Animal class से extend हो रही है। जब Dog class का object create होता है, तब super(name) के through parent class Animal का constructor call होता है।

इस तरह Dog class में parent class कि properties और methods को access किया जा सकता है।

Note* ध्यान रहे super एक keyword है जिसका use करके Inheritance में parent class की properties / methods को access किया जाता है। जबकि super() एक function है जिसका use parent class के constructor को call करने के लिए किया जाता है

●●●

Common Mistakes While Using this and super

1. Not calling super() in Constructor

जब आप child class का constructor लिखते हैं, तो जरूरी है कि parent class का constructor super() के through call किया जाये।

अगर आप super() को call नहीं करते, तो TypeScript error throw करता है।

Copy
class Animal {
    constructor(public name: string) {}
}

class Dog extends Animal {
    constructor(name: string) {
        this.name = name;
    }
}
const dog = new Dog('Deshi Kutta');

Error: 'super' must be called before accessing 'this' in the constructor

2. Incorrect this Binding

अगर this का context सही से bind नहीं होता, तो method call में issues आ सकते हैं।

JavaScript में, this का context loose हो सकता है, लेकिन TypeScript में arrow functions के use से this का context bind किया जा सकता है।

Copy
class Button {
    label: string;

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

    click = () => {
        console.log(`Button ${this.label} clicked`);
    }
}

const button = new Button('Submit');
setTimeout(button.click, 1000);  // Output: Button Submit clicked

●●●

Conclusion

this और super दोनो TypeScript में important keywords हैं, लेकिन इनका use अलग contexts में होता है।

• this : Current object को refer करता है और उसकी properties/methods को access करता है।

• super : ये inheritance में use होता है। जो Parent class object को refer करता है और उसकी properties/methods को access करता है। इसके साथ super() , Parent class के constructor को call करता है।

Happy coding 😍