📞 Super Keyword: Calling Parent Class Members

🎯 Introduction

Welcome to the super-powered world of the super keyword! 🎉 In this guide, we’ll explore one of the most important tools for working with inheritance in TypeScript: the ability to communicate with parent classes.

You’ll discover how super acts like a bridge 🌉 between child and parent classes, allowing you to access parent constructors and methods. Whether you’re building complex class hierarchies 🏗️ or extending existing functionality 🔧, understanding super is essential for writing clean, maintainable code.

By the end of this tutorial, you’ll be a super expert at using super! Let’s dive in! 🏊‍♂️

📚 Understanding the Super Keyword

🤔 What is Super?

The super keyword is like a telephone 📞 that lets you call your parent class directly. Think of it as a way to say “Hey parent, I need to use your functionality!”

In TypeScript terms, super allows you to:

• ✨ Call the parent class constructor
• 🚀 Access parent class methods
• 🛡️ Extend parent functionality without losing it
• 🔧 Coordinate between parent and child classes

💡 Why Use Super?

Here’s why developers love the super keyword:

1. Code Reuse ♻️: Don’t rewrite what already works
2. Proper Initialization 🎯: Ensure parent setup happens first
3. Method Enhancement 🚀: Extend rather than replace functionality
4. Clean Architecture 🏗️: Maintain clear class relationships

Real-world example: Imagine building a notification system 📱. Your base Notification class handles basic setup, while EmailNotification uses super() to initialize the base, then adds email-specific features.

🔧 Basic Syntax and Usage

📝 Constructor Super Calls

Let’s start with the most common use of super:

// 👤 Base person class
class Person {
  name: string;
  age: number;
  id: string;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
    this.id = Math.random().toString(36).substring(2, 9); // 🎲 Random ID
    console.log(`👤 Person created: ${this.name} (ID: ${this.id})`);
  }

  // 👋 Basic greeting
  greet(): string {
    return `Hello, I'm ${this.name}! 😊`;
  }

  // 📄 Get basic info
  getInfo(): string {
    return `${this.name}, age ${this.age} (ID: ${this.id})`;
  }
}

// 👨‍💼 Employee extends Person
class Employee extends Person {
  jobTitle: string;
  salary: number;

  constructor(name: string, age: number, jobTitle: string, salary: number) {
    // 📞 MUST call parent constructor first!
    super(name, age); // This initializes name, age, and id
    
    // ✨ Now we can add our own properties
    this.jobTitle = jobTitle;
    this.salary = salary;
    console.log(`👨‍💼 Employee specialized: ${jobTitle}`);
  }

  // 💼 Employee-specific method
  work(): string {
    return `${this.name} is working as a ${this.jobTitle}! 💼`;
  }

  // 📊 Get complete employee info
  getInfo(): string {
    // 📞 Call parent's getInfo, then add our own details
    const parentInfo = super.getInfo(); // Gets basic person info
    return `${parentInfo} - ${this.jobTitle} ($${this.salary.toLocaleString()})`;
  }
}

// 🎮 Let's see it in action!
const employee = new Employee("Alice", 30, "Senior Developer", 95000);
console.log(employee.greet()); // "Hello, I'm Alice! 😊" (inherited)
console.log(employee.work()); // "Alice is working as a Senior Developer! 💼"
console.log(employee.getInfo()); // Combined parent + child info

💡 Explanation: Notice how super(name, age) in the constructor calls the parent constructor, and super.getInfo() calls the parent method!

🎯 Method Enhancement Pattern

Here’s how to enhance parent functionality without losing it:

// 🏦 Bank account base class
class BankAccount {
  protected balance: number;
  protected accountNumber: string;

  constructor(accountNumber: string, initialBalance: number = 0) {
    this.accountNumber = accountNumber;
    this.balance = initialBalance;
    console.log(`🏦 Account ${accountNumber} created with $${initialBalance}`);
  }

  // 💰 Basic deposit
  deposit(amount: number): void {
    if (amount > 0) {
      this.balance += amount;
      console.log(`✅ Deposited $${amount}. New balance: $${this.balance}`);
    } else {
      console.log("❌ Deposit amount must be positive");
    }
  }

  // 💸 Basic withdrawal
  withdraw(amount: number): boolean {
    if (amount > 0 && amount <= this.balance) {
      this.balance -= amount;
      console.log(`✅ Withdrew $${amount}. New balance: $${this.balance}`);
      return true;
    } else {
      console.log("❌ Invalid withdrawal amount");
      return false;
    }
  }

  // 📊 Check balance
  getBalance(): number {
    return this.balance;
  }
}

// 💳 Premium account with enhanced features
class PremiumAccount extends BankAccount {
  private rewardPoints: number = 0;
  private bonusRate: number = 0.02; // 2% bonus

  constructor(accountNumber: string, initialBalance: number = 0) {
    super(accountNumber, initialBalance); // 📞 Call parent constructor
    console.log("✨ Premium features activated!");
  }

  // 🚀 Enhanced deposit with rewards
  deposit(amount: number): void {
    // 📞 First, do the normal deposit
    super.deposit(amount);
    
    // ✨ Then add premium features
    if (amount > 0) {
      const bonusPoints = Math.floor(amount * this.bonusRate);
      this.rewardPoints += bonusPoints;
      console.log(`🌟 Earned ${bonusPoints} reward points! Total: ${this.rewardPoints}`);
    }
  }

  // 💎 Enhanced withdrawal with premium benefits
  withdraw(amount: number): boolean {
    // 📞 Try the normal withdrawal first
    const success = super.withdraw(amount);
    
    // ✨ Add premium features if successful
    if (success && amount >= 100) {
      console.log("🎁 Large withdrawal bonus: +5 reward points!");
      this.rewardPoints += 5;
    }
    
    return success;
  }

  // 🏆 Premium-specific method
  getRewardPoints(): number {
    return this.rewardPoints;
  }

  // 🎯 Redeem points for cash
  redeemPoints(): void {
    if (this.rewardPoints >= 100) {
      const cashValue = Math.floor(this.rewardPoints / 100) * 10; // $10 per 100 points
      this.rewardPoints %= 100; // Keep remainder
      
      // 📞 Use parent's deposit method to add the cash
      super.deposit(cashValue);
      console.log(`🎉 Redeemed points for $${cashValue}!`);
    } else {
      console.log("❌ Need at least 100 points to redeem");
    }
  }
}

// 💳 Let's test premium features!
const premiumAccount = new PremiumAccount("PREM001", 1000);
premiumAccount.deposit(500); // Earns reward points!
premiumAccount.withdraw(200); // Earns bonus points!
console.log(`💰 Balance: $${premiumAccount.getBalance()}`);
console.log(`🌟 Reward Points: ${premiumAccount.getRewardPoints()}`);

💡 Practical Examples

🎮 Example 1: Game Character Evolution

Let’s create a game where characters can evolve and gain new abilities:

// 🗡️ Base warrior class
class Warrior {
  name: string;
  health: number;
  strength: number;
  level: number;

  constructor(name: string) {
    this.name = name;
    this.health = 100;
    this.strength = 15;
    this.level = 1;
    console.log(`⚔️ ${name} becomes a warrior!`);
  }

  // ⚔️ Basic attack
  attack(): number {
    const damage = this.strength + Math.floor(Math.random() * 10);
    console.log(`⚔️ ${this.name} attacks for ${damage} damage!`);
    return damage;
  }

  // 🛡️ Defend action
  defend(): void {
    console.log(`🛡️ ${this.name} raises their shield!`);
  }

  // 📈 Level up
  levelUp(): void {
    this.level++;
    this.health += 20;
    this.strength += 3;
    console.log(`🎉 ${this.name} reached level ${this.level}!`);
  }

  // 📊 Get stats
  getStats(): string {
    return `⚔️ ${this.name} - Level ${this.level} | HP: ${this.health} | STR: ${this.strength}`;
  }
}

// 🏰 Paladin - evolved warrior with holy powers
class Paladin extends Warrior {
  holyPower: number;
  healingAbility: number;

  constructor(name: string) {
    // 📞 First become a warrior
    super(name);
    
    // ✨ Then gain holy powers
    this.holyPower = 25;
    this.healingAbility = 15;
    console.log(`✨ ${name} is blessed with holy power!`);
  }

  // 🚀 Enhanced attack with holy damage
  attack(): number {
    // 📞 Do the basic warrior attack
    const basicDamage = super.attack();
    
    // ✨ Add holy damage
    const holyDamage = Math.floor(this.holyPower / 5);
    const totalDamage = basicDamage + holyDamage;
    
    if (holyDamage > 0) {
      console.log(`✨ Holy power adds ${holyDamage} divine damage!`);
    }
    
    return totalDamage;
  }

  // 🛡️ Enhanced defend with blessing
  defend(): void {
    // 📞 Do basic defense
    super.defend();
    
    // ✨ Add divine blessing
    console.log(`✨ Divine blessing protects ${this.name}!`);
    this.heal(5); // Self-heal while defending
  }

  // 💖 Healing ability
  heal(amount: number): void {
    this.health = Math.min(this.health + amount, 100 + (this.level * 20));
    console.log(`💖 ${this.name} heals for ${amount} HP! Current: ${this.health}`);
  }

  // 📈 Enhanced level up with holy power growth
  levelUp(): void {
    // 📞 Do the basic level up
    super.levelUp();
    
    // ✨ Grow holy powers
    this.holyPower += 5;
    this.healingAbility += 3;
    console.log(`✨ Holy powers grow stronger! Holy Power: ${this.holyPower}`);
  }

  // 🙏 Prayer for team healing
  prayForTeam(): void {
    console.log(`🙏 ${this.name} prays for divine intervention!`);
    console.log("✨ Team receives blessing of protection!");
  }

  // 📊 Enhanced stats with holy info
  getStats(): string {
    // 📞 Get basic warrior stats
    const basicStats = super.getStats();
    
    // ✨ Add paladin-specific info
    return `${basicStats} | Holy: ${this.holyPower} | Heal: ${this.healingAbility} ✨`;
  }
}

// ⚡ Thunder Knight - ultimate evolution
class ThunderKnight extends Paladin {
  lightningPower: number;
  stormsInvoked: number;

  constructor(name: string) {
    // 📞 First become a paladin (which calls warrior constructor too!)
    super(name);
    
    // ⚡ Gain storm powers
    this.lightningPower = 40;
    this.stormsInvoked = 0;
    console.log(`⚡ ${name} commands the power of storms!`);
  }

  // ⚡ Ultimate attack with all powers combined
  attack(): number {
    // 📞 Get paladin attack (which includes warrior attack + holy damage)
    const combinedDamage = super.attack();
    
    // ⚡ Add lightning damage
    const lightningDamage = Math.floor(this.lightningPower / 3);
    const finalDamage = combinedDamage + lightningDamage;
    
    console.log(`⚡ Lightning strikes for ${lightningDamage} shock damage!`);
    return finalDamage;
  }

  // 🌩️ Special storm ability
  invokeStorm(): void {
    this.stormsInvoked++;
    console.log(`🌩️ ${this.name} summons a devastating storm! (Storm #${this.stormsInvoked})`);
    
    // ⚡ Massive damage attack
    const stormDamage = this.lightningPower * 2;
    console.log(`⚡ Storm deals ${stormDamage} area damage!`);
    
    // 📞 Use parent's heal to recover from the effort
    this.heal(10);
  }

  // 📈 Triple-enhanced level up
  levelUp(): void {
    // 📞 Do paladin level up (which does warrior level up too!)
    super.levelUp();
    
    // ⚡ Grow storm powers
    this.lightningPower += 8;
    console.log(`⚡ Storm powers intensify! Lightning Power: ${this.lightningPower}`);
  }

  // 📊 Ultimate stats display
  getStats(): string {
    // 📞 Get paladin stats (which includes warrior stats)
    const inheritedStats = super.getStats();
    
    // ⚡ Add thunder knight info
    return `${inheritedStats} | Lightning: ${this.lightningPower} | Storms: ${this.stormsInvoked} ⚡`;
  }
}

// 🎮 Let's witness the evolution!
const hero = new ThunderKnight("Thorgar");

console.log("\n" + hero.getStats());
hero.attack(); // Combines all three attack types!
hero.defend(); // Enhanced defense with healing
hero.invokeStorm(); // Unique storm ability
hero.levelUp(); // Triple-enhanced leveling
console.log("\n" + hero.getStats());

🏪 Example 2: E-commerce Notification System

Let’s build a notification system that builds upon base functionality:

// 📨 Base notification class
class Notification {
  id: string;
  message: string;
  timestamp: Date;
  priority: 'low' | 'medium' | 'high';
  sent: boolean = false;

  constructor(message: string, priority: 'low' | 'medium' | 'high' = 'medium') {
    this.id = `notif_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`;
    this.message = message;
    this.priority = priority;
    this.timestamp = new Date();
    console.log(`📨 Notification created: ${this.id}`);
  }

  // 📤 Basic send method
  send(): boolean {
    if (this.sent) {
      console.log("⚠️ Notification already sent");
      return false;
    }

    this.sent = true;
    console.log(`📤 Notification sent: "${this.message}"`);
    return true;
  }

  // 📋 Get notification details
  getDetails(): string {
    return `📨 ${this.id} | ${this.priority.toUpperCase()} | ${this.message} | ${this.timestamp.toLocaleTimeString()}`;
  }

  // 🎯 Get priority emoji
  getPriorityEmoji(): string {
    const emojis = { low: '🟢', medium: '🟡', high: '🔴' };
    return emojis[this.priority];
  }
}

// 📧 Email notification with enhanced features
class EmailNotification extends Notification {
  recipient: string;
  subject: string;
  attachments: string[];

  constructor(recipient: string, subject: string, message: string, priority: 'low' | 'medium' | 'high' = 'medium') {
    // 📞 Create base notification
    super(message, priority);
    
    // ✨ Add email-specific properties
    this.recipient = recipient;
    this.subject = subject;
    this.attachments = [];
    console.log(`📧 Email notification prepared for ${recipient}`);
  }

  // 📎 Add attachment
  addAttachment(filePath: string): void {
    this.attachments.push(filePath);
    console.log(`📎 Attached: ${filePath}`);
  }

  // 🚀 Enhanced send with email-specific logic
  send(): boolean {
    // 📞 Check if base send is successful
    if (!super.send()) {
      return false; // Already sent or failed
    }

    // ✨ Email-specific sending logic
    console.log(`📧 Sending email to: ${this.recipient}`);
    console.log(`📝 Subject: ${this.subject}`);
    
    if (this.attachments.length > 0) {
      console.log(`📎 Attachments: ${this.attachments.join(', ')}`);
    }

    // 🎯 Priority-based delivery
    if (this.priority === 'high') {
      console.log('🚨 HIGH PRIORITY: Sending via express delivery!');
    }

    console.log('✅ Email delivered successfully!');
    return true;
  }

  // 📊 Enhanced details with email info
  getDetails(): string {
    // 📞 Get base details
    const baseDetails = super.getDetails();
    
    // ✨ Add email-specific details
    const emailInfo = `📧 To: ${this.recipient} | Subject: "${this.subject}"`;
    const attachmentInfo = this.attachments.length > 0 
      ? ` | 📎 ${this.attachments.length} attachments` 
      : '';
    
    return `${baseDetails} | ${emailInfo}${attachmentInfo}`;
  }
}

// 📱 SMS notification with character limits
class SMSNotification extends Notification {
  phoneNumber: string;
  maxLength: number = 160;

  constructor(phoneNumber: string, message: string, priority: 'low' | 'medium' | 'high' = 'medium') {
    // 📞 Create base notification with truncated message if needed
    const truncatedMessage = message.length > 160 
      ? message.substring(0, 157) + '...' 
      : message;
    
    super(truncatedMessage, priority);
    
    // ✨ Add SMS-specific properties
    this.phoneNumber = phoneNumber;
    console.log(`📱 SMS notification prepared for ${phoneNumber}`);
    
    if (message.length > 160) {
      console.log(`⚠️ Message truncated from ${message.length} to ${this.message.length} characters`);
    }
  }

  // 🚀 Enhanced send with SMS-specific features
  send(): boolean {
    // 📞 Do the basic notification send
    if (!super.send()) {
      return false;
    }

    // ✨ SMS-specific logic
    console.log(`📱 Sending SMS to: ${this.phoneNumber}`);
    console.log(`📝 Message (${this.message.length}/${this.maxLength} chars): "${this.message}"`);
    
    // 🎯 Priority affects delivery speed
    const deliveryTime = this.priority === 'high' ? 'immediate' : 'within 1 minute';
    console.log(`⏱️ Delivery time: ${deliveryTime}`);
    
    console.log('✅ SMS sent successfully!');
    return true;
  }

  // 📊 Enhanced details with SMS info
  getDetails(): string {
    // 📞 Get base details
    const baseDetails = super.getDetails();
    
    // ✨ Add SMS-specific details
    const smsInfo = `📱 To: ${this.phoneNumber} | Length: ${this.message.length}/${this.maxLength}`;
    
    return `${baseDetails} | ${smsInfo}`;
  }
}

// 🔔 Push notification for mobile apps
class PushNotification extends Notification {
  deviceToken: string;
  appName: string;
  soundEnabled: boolean;
  badgeCount: number;

  constructor(deviceToken: string, appName: string, message: string, priority: 'low' | 'medium' | 'high' = 'medium') {
    // 📞 Create base notification
    super(message, priority);
    
    // ✨ Add push-specific properties
    this.deviceToken = deviceToken;
    this.appName = appName;
    this.soundEnabled = priority !== 'low'; // Low priority = silent
    this.badgeCount = 1;
    console.log(`🔔 Push notification prepared for ${appName}`);
  }

  // 🔊 Toggle sound
  toggleSound(): void {
    this.soundEnabled = !this.soundEnabled;
    console.log(`🔊 Sound ${this.soundEnabled ? 'enabled' : 'disabled'}`);
  }

  // 🚀 Enhanced send with push-specific features
  send(): boolean {
    // 📞 Do the basic send
    if (!super.send()) {
      return false;
    }

    // ✨ Push notification specific logic
    console.log(`🔔 Sending push notification to ${this.appName}`);
    console.log(`📱 Device: ${this.deviceToken.substring(0, 8)}...`);
    console.log(`📝 Message: "${this.message}"`);
    
    if (this.soundEnabled) {
      console.log(`🔊 Playing notification sound`);
    } else {
      console.log(`🔇 Silent notification`);
    }

    console.log(`🔢 Badge count: ${this.badgeCount}`);
    console.log('✅ Push notification delivered!');
    return true;
  }

  // 📊 Enhanced details with push info
  getDetails(): string {
    // 📞 Get base details
    const baseDetails = super.getDetails();
    
    // ✨ Add push-specific details
    const pushInfo = `🔔 App: ${this.appName} | Sound: ${this.soundEnabled ? '🔊' : '🔇'} | Badge: ${this.badgeCount}`;
    
    return `${baseDetails} | ${pushInfo}`;
  }
}

// 📬 Notification manager to handle all types
class NotificationManager {
  private notifications: Notification[] = [];

  addNotification(notification: Notification): void {
    this.notifications.push(notification);
    console.log(`➕ Added notification: ${notification.id}`);
  }

  sendAll(): void {
    console.log(`📤 Sending ${this.notifications.length} notifications...`);
    this.notifications.forEach(notification => {
      notification.send();
    });
  }

  showAllDetails(): void {
    console.log('\n📋 All Notifications:');
    this.notifications.forEach((notification, index) => {
      console.log(`${index + 1}. ${notification.getDetails()}`);
    });
  }
}

// 🎮 Let's test our notification system!
const notificationManager = new NotificationManager();

// Create different types of notifications
const email = new EmailNotification(
  '[email protected]',
  'Welcome to TypeScript!',
  'Thanks for joining our TypeScript tutorial series!',
  'high'
);
email.addAttachment('welcome-guide.pdf');

const sms = new SMSNotification(
  '+1234567890',
  'Your TypeScript tutorial is ready! Click here to start learning: https://example.com/ts-tutorial-super-keyword',
  'medium'
);

const push = new PushNotification(
  'device_token_abc123xyz',
  'TypeScript Academy',
  'New lesson available: Super Keyword!',
  'high'
);

// Add to manager and send
notificationManager.addNotification(email);
notificationManager.addNotification(sms);
notificationManager.addNotification(push);

notificationManager.showAllDetails();
console.log('\n🚀 Sending all notifications...\n');
notificationManager.sendAll();

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: Super with Static Methods

You can also use super with static methods:

// 🏭 Base factory class
class VehicleFactory {
  static vehicleCount: number = 0;

  static createVehicle(): string {
    this.vehicleCount++;
    return `🚗 Vehicle #${this.vehicleCount} created`;
  }

  static getReport(): string {
    return `📊 Total vehicles created: ${this.vehicleCount}`;
  }
}

// ✈️ Specialized aircraft factory
class AircraftFactory extends VehicleFactory {
  static aircraftCount: number = 0;

  // 🚀 Enhanced creation with aircraft specifics
  static createVehicle(): string {
    // 📞 Call parent's method first
    const baseResult = super.createVehicle();
    
    // ✨ Add aircraft-specific logic
    this.aircraftCount++;
    return `${baseResult} ✈️ (Aircraft #${this.aircraftCount})`;
  }

  // 📈 Enhanced report with aircraft details
  static getReport(): string {
    // 📞 Get base report
    const baseReport = super.getReport();
    
    // ✨ Add aircraft details
    return `${baseReport} | Aircraft: ${this.aircraftCount} ✈️`;
  }
}

console.log(AircraftFactory.createVehicle()); // Creates both vehicle and aircraft
console.log(AircraftFactory.createVehicle());
console.log(AircraftFactory.getReport()); // Shows both counts

🏗️ Advanced Topic 2: Super in Method Chaining

Using super with method chaining patterns:

// 🔗 Chainable configuration class
class ConfigBuilder {
  protected config: Record<string, any> = {};

  setValue(key: string, value: any): this {
    this.config[key] = value;
    console.log(`⚙️ Set ${key} = ${value}`);
    return this;
  }

  build(): Record<string, any> {
    console.log('🏗️ Configuration built!');
    return { ...this.config };
  }
}

// 🗄️ Database configuration builder
class DatabaseConfigBuilder extends ConfigBuilder {
  // 🚀 Enhanced setValue with validation
  setValue(key: string, value: any): this {
    // 🛡️ Add database-specific validation
    if (key === 'port' && (typeof value !== 'number' || value < 1 || value > 65535)) {
      console.log('❌ Invalid port number');
      return this;
    }

    if (key === 'host' && typeof value !== 'string') {
      console.log('❌ Host must be a string');
      return this;
    }

    // 📞 Call parent's setValue if validation passes
    return super.setValue(key, value);
  }

  // 🗄️ Database-specific methods
  setConnectionPool(size: number): this {
    return this.setValue('connectionPoolSize', size);
  }

  setSSL(enabled: boolean): this {
    return this.setValue('ssl', enabled);
  }

  // 🚀 Enhanced build with database defaults
  build(): Record<string, any> {
    // Set defaults before building
    if (!this.config.port) this.setValue('port', 5432);
    if (!this.config.host) this.setValue('host', 'localhost');
    
    // 📞 Call parent's build
    return super.build();
  }
}

// 🔗 Method chaining in action!
const dbConfig = new DatabaseConfigBuilder()
  .setValue('database', 'typescript_tutorial')
  .setValue('username', 'dev_user')
  .setValue('port', 5432)
  .setConnectionPool(10)
  .setSSL(true)
  .build();

console.log('📋 Final config:', dbConfig);

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Forgetting to Call super() in Constructor

// ❌ Wrong way - missing super() call!
class BadChild extends Person {
  specialty: string;

  constructor(name: string, age: number, specialty: string) {
    // Missing super(name, age) - TypeScript will error!
    this.specialty = specialty; // 💥 Error: must call super() first
  }
}

// ✅ Correct way - always call super() first!
class GoodChild extends Person {
  specialty: string;

  constructor(name: string, age: number, specialty: string) {
    super(name, age); // ✅ Call parent constructor first!
    this.specialty = specialty; // ✅ Now this works
  }
}

🤯 Pitfall 2: Using ‘this’ Before super()

class Parent {
  value: number;
  
  constructor(value: number) {
    this.value = value;
  }
}

// ❌ Wrong way - using 'this' before super()!
class BadChild extends Parent {
  multiplier: number;

  constructor(value: number, multiplier: number) {
    this.multiplier = multiplier; // 💥 Error: must call super() before using 'this'
    super(value);
  }
}

// ✅ Correct way - super() first, then 'this'!
class GoodChild extends Parent {
  multiplier: number;

  constructor(value: number, multiplier: number) {
    super(value); // ✅ Call super() first
    this.multiplier = multiplier; // ✅ Now 'this' is available
  }
}

🔄 Pitfall 3: Infinite Recursion with super

class Parent {
  calculate(): number {
    return 42;
  }
}

// ❌ Dangerous - potential infinite loop!
class BadChild extends Parent {
  calculate(): number {
    // This calls the parent method correctly
    const parentResult = super.calculate();
    
    // But this would call itself infinitely!
    // return this.calculate() + parentResult; // 💥 Stack overflow!
    
    return parentResult * 2; // ✅ This is correct
  }
}

🛠️ Best Practices

1. 📞 Always Call super() First: In constructors, call super() before using this
2. 🎯 Use super for Enhancement: Don’t replace parent functionality, enhance it
3. 🔍 Be Explicit: Use super.method() to make parent calls obvious
4. ⚡ Call Once: Don’t call the same super method multiple times unnecessarily
5. 📝 Document Intent: Comment why you’re calling super methods

🧪 Hands-On Exercise

🎯 Challenge: Build a Social Media Post System

Create a social media system where different post types enhance base functionality:

📋 Requirements:

• ✅ Base Post class with content, author, timestamp, likes
• 📸 PhotoPost class with image handling and filters
• 📹 VideoPost class with duration and quality settings
• 📝 TextPost class with character limits and hashtag extraction
• 🔄 Each class should enhance parent methods using super

🚀 Bonus Points:

• Add comment system to all post types
• Implement engagement scoring
• Create post analytics features

💡 Solution

// 📱 Base social media post
class Post {
  id: string;
  content: string;
  author: string;
  timestamp: Date;
  likes: number = 0;
  comments: string[] = [];

  constructor(content: string, author: string) {
    this.id = `post_${Date.now()}_${Math.random().toString(36).substr(2, 5)}`;
    this.content = content;
    this.author = author;
    this.timestamp = new Date();
    console.log(`📱 Post created by ${author}`);
  }

  // 👍 Like the post
  like(): void {
    this.likes++;
    console.log(`👍 Post liked! Total likes: ${this.likes}`);
  }

  // 💬 Add comment
  addComment(comment: string): void {
    this.comments.push(comment);
    console.log(`💬 Comment added: "${comment}"`);
  }

  // 📊 Get engagement score
  getEngagementScore(): number {
    return this.likes + (this.comments.length * 2);
  }

  // 🔄 Share the post
  share(): void {
    console.log(`🔄 "${this.content.substring(0, 30)}..." shared by ${this.author}`);
  }

  // 📋 Get post summary
  getSummary(): string {
    return `📱 ${this.author} | ${this.timestamp.toLocaleDateString()} | 👍 ${this.likes} | 💬 ${this.comments.length}`;
  }
}

// 📸 Photo post with image features
class PhotoPost extends Post {
  imageUrl: string;
  filter: string;
  altText: string;

  constructor(content: string, author: string, imageUrl: string, altText: string = '') {
    // 📞 Create base post
    super(content, author);
    
    // ✨ Add photo-specific properties
    this.imageUrl = imageUrl;
    this.filter = 'none';
    this.altText = altText;
    console.log(`📸 Photo attached: ${imageUrl}`);
  }

  // 🎨 Apply filter
  applyFilter(filter: string): void {
    this.filter = filter;
    console.log(`🎨 Applied ${filter} filter to photo`);
  }

  // 🚀 Enhanced like with photo engagement
  like(): void {
    // 📞 Do the basic like
    super.like();
    
    // ✨ Photo posts get bonus engagement
    if (this.likes % 10 === 0) {
      console.log(`📸 Photo milestone! ${this.likes} likes reached!`);
    }
  }

  // 🚀 Enhanced share with image preview
  share(): void {
    // 📞 Do basic share
    super.share();
    
    // ✨ Add photo-specific sharing
    console.log(`🖼️ Shared with image preview: ${this.imageUrl}`);
  }

  // 📊 Enhanced summary with photo info
  getSummary(): string {
    // 📞 Get base summary
    const baseSummary = super.getSummary();
    
    // ✨ Add photo details
    return `${baseSummary} | 📸 Photo (${this.filter} filter)`;
  }
}

// 📹 Video post with media features
class VideoPost extends Post {
  videoUrl: string;
  duration: number; // in seconds
  quality: '480p' | '720p' | '1080p' | '4K';
  views: number = 0;

  constructor(content: string, author: string, videoUrl: string, duration: number, quality: '480p' | '720p' | '1080p' | '4K' = '720p') {
    // 📞 Create base post
    super(content, author);
    
    // ✨ Add video-specific properties
    this.videoUrl = videoUrl;
    this.duration = duration;
    this.quality = quality;
    console.log(`📹 Video attached: ${this.getFormattedDuration()} at ${quality}`);
  }

  // ⏯️ Play video
  play(): void {
    this.views++;
    console.log(`▶️ Playing video... Views: ${this.views}`);
  }

  // 🕐 Get formatted duration
  getFormattedDuration(): string {
    const minutes = Math.floor(this.duration / 60);
    const seconds = this.duration % 60;
    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
  }

  // 🚀 Enhanced engagement score including views
  getEngagementScore(): number {
    // 📞 Get base engagement
    const baseEngagement = super.getEngagementScore();
    
    // ✨ Add view-based engagement
    const viewEngagement = Math.floor(this.views / 10);
    return baseEngagement + viewEngagement;
  }

  // 🚀 Enhanced share with video preview
  share(): void {
    // 📞 Do basic share
    super.share();
    
    // ✨ Add video-specific sharing
    console.log(`🎬 Shared video: ${this.getFormattedDuration()} at ${this.quality}`);
  }

  // 📊 Enhanced summary with video info
  getSummary(): string {
    // 📞 Get base summary
    const baseSummary = super.getSummary();
    
    // ✨ Add video details
    return `${baseSummary} | 📹 ${this.getFormattedDuration()} (${this.views} views)`;
  }
}

// 📝 Text post with text processing features
class TextPost extends Post {
  hashtags: string[] = [];
  mentions: string[] = [];
  characterLimit: number = 280;

  constructor(content: string, author: string) {
    // 🔍 Process content before creating post
    const processedContent = content.length > 280 
      ? content.substring(0, 277) + '...' 
      : content;

    // 📞 Create base post with processed content
    super(processedContent, author);
    
    // ✨ Extract hashtags and mentions
    this.extractHashtags();
    this.extractMentions();
    
    if (content.length > 280) {
      console.log(`✂️ Text truncated from ${content.length} to ${this.content.length} characters`);
    }
  }

  // 🔍 Extract hashtags from content
  private extractHashtags(): void {
    const hashtagRegex = /#(\w+)/g;
    let match;
    
    while ((match = hashtagRegex.exec(this.content)) !== null) {
      this.hashtags.push(match[1]);
    }
    
    if (this.hashtags.length > 0) {
      console.log(`🏷️ Found hashtags: ${this.hashtags.join(', ')}`);
    }
  }

  // 👥 Extract mentions from content
  private extractMentions(): void {
    const mentionRegex = /@(\w+)/g;
    let match;
    
    while ((match = mentionRegex.exec(this.content)) !== null) {
      this.mentions.push(match[1]);
    }
    
    if (this.mentions.length > 0) {
      console.log(`👥 Mentioned users: ${this.mentions.join(', ')}`);
    }
  }

  // 🚀 Enhanced share with hashtag promotion
  share(): void {
    // 📞 Do basic share
    super.share();
    
    // ✨ Promote hashtags when sharing
    if (this.hashtags.length > 0) {
      console.log(`🏷️ Trending hashtags: ${this.hashtags.map(tag => `#${tag}`).join(' ')}`);
    }
  }

  // 📊 Enhanced summary with text features
  getSummary(): string {
    // 📞 Get base summary
    const baseSummary = super.getSummary();
    
    // ✨ Add text-specific details
    const textInfo = `📝 ${this.content.length}/${this.characterLimit} chars`;
    const hashtagInfo = this.hashtags.length > 0 ? ` | 🏷️ ${this.hashtags.length}` : '';
    const mentionInfo = this.mentions.length > 0 ? ` | 👥 ${this.mentions.length}` : '';
    
    return `${baseSummary} | ${textInfo}${hashtagInfo}${mentionInfo}`;
  }
}

// 📱 Social media feed manager
class SocialFeed {
  private posts: Post[] = [];

  addPost(post: Post): void {
    this.posts.push(post);
    console.log(`➕ Added post to feed: ${post.id}`);
  }

  showFeed(): void {
    console.log('\n📱 Social Media Feed:');
    this.posts.forEach((post, index) => {
      console.log(`${index + 1}. ${post.getSummary()}`);
    });
  }

  getTopPosts(count: number = 3): Post[] {
    return this.posts
      .sort((a, b) => b.getEngagementScore() - a.getEngagementScore())
      .slice(0, count);
  }

  getTrendingHashtags(): string[] {
    const hashtagCount = new Map<string, number>();
    
    this.posts.forEach(post => {
      if (post instanceof TextPost) {
        post.hashtags.forEach(hashtag => {
          hashtagCount.set(hashtag, (hashtagCount.get(hashtag) || 0) + 1);
        });
      }
    });

    return Array.from(hashtagCount.entries())
      .sort(([,a], [,b]) => b - a)
      .slice(0, 5)
      .map(([hashtag]) => `#${hashtag}`);
  }
}

// 🎮 Let's create some social media magic!
const feed = new SocialFeed();

// Create different types of posts
const textPost = new TextPost(
  'Just learned about the super keyword in #TypeScript! Amazing how it connects parent and child classes. Thanks @typescript @developer #coding #learning',
  'CodeLearner'
);

const photoPost = new PhotoPost(
  'Beautiful sunset from my coding session! 🌅',
  'DevPhotographer',
  'https://example.com/sunset.jpg',
  'Golden sunset over mountains with laptop in foreground'
);

const videoPost = new VideoPost(
  'TypeScript tutorial: Super keyword explained!',
  'TechTeacher',
  'https://example.com/tutorial.mp4',
  450, // 7:30 minutes
  '1080p'
);

// Add some engagement
textPost.like();
textPost.addComment('Great explanation!');
textPost.addComment('Thanks for sharing!');

photoPost.like();
photoPost.like();
photoPost.applyFilter('vintage');

videoPost.play();
videoPost.play();
videoPost.play();
videoPost.like();

// Add to feed
feed.addPost(textPost);
feed.addPost(photoPost);
feed.addPost(videoPost);

// Show results
feed.showFeed();

console.log('\n🏆 Top Posts:');
feed.getTopPosts().forEach((post, index) => {
  console.log(`${index + 1}. ${post.getSummary()} (Score: ${post.getEngagementScore()})`);
});

console.log('\n🔥 Trending Hashtags:');
console.log(feed.getTrendingHashtags().join(' '));

// Share some posts
console.log('\n🔄 Sharing posts...');
textPost.share();
photoPost.share();
videoPost.share();

🎓 Key Takeaways

You’ve mastered the super keyword! Here’s what you can now do:

• ✅ Call parent constructors with super() 📞
• ✅ Access parent methods effectively 🔧
• ✅ Enhance functionality without losing parent features 🚀
• ✅ Build proper class hierarchies with clear communication 🏗️
• ✅ Avoid common super pitfalls like a pro 🛡️

Remember: super is your bridge to parent classes - use it to enhance, not replace! 🌉

🤝 Next Steps

Congratulations! 🎉 You’ve mastered the super keyword!

Here’s what to do next:

1. 💻 Practice with the social media system exercise above
2. 🏗️ Build your own class hierarchy using super effectively
3. 📚 Move on to our next tutorial: Method Overriding: Customizing Inherited Behavior
4. 🌟 Experiment with static super calls and advanced patterns!

Remember: Every great class hierarchy uses super effectively. Keep building, keep learning, and super-charge your TypeScript skills! 🚀

Happy coding! 🎉🚀✨