Why Super keyword behavior in Typescript? - Purpose & Use Cases

The Big Idea

Discover how a simple keyword can save you from rewriting code and bugs!

The Scenario

Imagine you have a family recipe book, and you want to add a new recipe that builds on your grandma's original recipe. Without a clear way to refer back to her recipe, you'd have to rewrite or copy it each time, risking mistakes or inconsistencies.

The Problem

Manually rewriting or copying the original recipe every time is slow and error-prone. You might forget an important step or ingredient, and updating the original recipe means changing it everywhere manually. This leads to confusion and bugs in your code.

The Solution

The super keyword acts like a direct link to the original recipe. It lets you easily call or extend the behavior of a parent class method without rewriting it. This keeps your code clean, consistent, and easy to maintain.

Before vs After

✗ Before

class Dog {
  speak() {
    return 'Woof!';
  }
}

class Puppy extends Dog {
  speak() {
    return 'Woof! Woof!'; // repeats parent logic manually
  }
}

✓ After

class Dog {
  speak() {
    return 'Woof!';
  }
}

class Puppy extends Dog {
  speak() {
    return super.speak() + ' Woof!';
  }
}

What It Enables

It enables you to build on existing behaviors easily, making your code more reusable and less error-prone.

Real Life Example

When creating a new type of user interface button that behaves like a standard button but with extra animation, super lets you reuse the standard button's click behavior and add your animation on top.

Key Takeaways

Super keyword helps call parent class methods easily.

It avoids rewriting code and reduces mistakes.

Makes extending and maintaining code simpler and cleaner.