🏗 ️ Inheritance in TypeScript: Extending Classes

🎯 Introduction

Welcome to the exciting world of TypeScript inheritance! 🎉 In this guide, we’ll explore one of the most powerful features of object-oriented programming: the ability to create new classes based on existing ones.

You’ll discover how inheritance can help you write more reusable, maintainable code by building class hierarchies. Whether you’re building game characters 🎮, UI components 🖼️, or business entities 💼, understanding inheritance is essential for writing scalable TypeScript applications.

By the end of this tutorial, you’ll feel confident creating class hierarchies that follow best practices! Let’s dive in! 🏊‍♂️

📚 Understanding Inheritance

🤔 What is Inheritance?

Inheritance is like a family tree 🌳. Think of it as a way for classes to share characteristics and behaviors, just like how children inherit traits from their parents.

In TypeScript terms, inheritance allows you to create a new class (child/derived class) that inherits properties and methods from an existing class (parent/base class). This means you can:

• ✨ Reuse existing code without duplication
• 🚀 Build upon proven functionality
• 🛡️ Maintain consistent interfaces
• 🔧 Extend behavior without modifying original code

💡 Why Use Inheritance?

Here’s why developers love inheritance:

1. Code Reusability ♻️: Write once, inherit everywhere
2. Maintainability 🔧: Changes in base class affect all children
3. Logical Hierarchy 🏗️: Models real-world relationships
4. Polymorphism 🎭: Treat different objects uniformly

Real-world example: Imagine building a zoo management system 🦁. You can create an Animal base class and inherit specific animals like Lion, Elephant, and Penguin.

🔧 Basic Syntax and Usage

📝 Simple Example

Let’s start with a friendly example:

// 👨‍👩‍👧‍👦 Base class - the parent
class Person {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

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

  // 🎂 Birthday celebration
  haveBirthday(): void {
    this.age++;
    console.log(`🎉 ${this.name} is now ${this.age} years old!`);
  }
}

// 👨‍🎓 Child class - extends the parent
class Student extends Person {
  studentId: string;
  major: string;

  constructor(name: string, age: number, studentId: string, major: string) {
    super(name, age); // 📞 Call parent constructor
    this.studentId = studentId;
    this.major = major;
  }

  // 📚 Student-specific method
  study(): string {
    return `${this.name} is studying ${this.major}! 📖`;
  }

  // 📝 Get student info
  getStudentInfo(): string {
    return `Student ID: ${this.studentId}, Major: ${this.major} 🎓`;
  }
}

💡 Explanation: The Student class inherits all properties and methods from Person and adds its own specific features!

🎯 Using Inherited Classes

Here’s how to use our inherited classes:

// 🏗️ Create instances
const person = new Person("Alice", 30);
const student = new Student("Bob", 20, "S12345", "Computer Science");

// 👤 Regular person
console.log(person.greet()); // "Hello, I'm Alice! 😊"
person.haveBirthday(); // "🎉 Alice is now 31 years old!"

// 👨‍🎓 Student (has all Person methods + Student methods)
console.log(student.greet()); // "Hello, I'm Bob! 😊" (inherited!)
console.log(student.study()); // "Bob is studying Computer Science! 📖"
console.log(student.getStudentInfo()); // "Student ID: S12345, Major: Computer Science 🎓"

// 🎂 Student can also have birthdays!
student.haveBirthday(); // "🎉 Bob is now 21 years old!"

💡 Practical Examples

🎮 Example 1: Game Character System

Let’s build a fun game character hierarchy:

// 🏰 Base character class
class GameCharacter {
  name: string;
  health: number;
  level: number;
  experience: number;

  constructor(name: string) {
    this.name = name;
    this.health = 100;
    this.level = 1;
    this.experience = 0;
  }

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

  // 🛡️ Take damage
  takeDamage(damage: number): void {
    this.health = Math.max(0, this.health - damage);
    console.log(`${this.name} takes ${damage} damage! Health: ${this.health} ❤️`);
    
    if (this.health === 0) {
      console.log(`💀 ${this.name} has been defeated!`);
    }
  }

  // ⭐ Gain experience
  gainExperience(xp: number): void {
    this.experience += xp;
    if (this.experience >= this.level * 100) {
      this.levelUp();
    }
  }

  // 📈 Level up
  private levelUp(): void {
    this.level++;
    this.health = 100; // 🔄 Full heal on level up
    console.log(`🎉 ${this.name} leveled up to ${this.level}!`);
  }
}

// 🧙‍♂️ Wizard class - magic focused
class Wizard extends GameCharacter {
  mana: number;
  spellPower: number;

  constructor(name: string) {
    super(name); // 📞 Call parent constructor
    this.mana = 50;
    this.spellPower = 15;
  }

  // ✨ Cast magic spell
  castSpell(): number {
    if (this.mana < 10) {
      console.log(`${this.name} doesn't have enough mana! 😔`);
      return 0;
    }

    this.mana -= 10;
    const damage = this.spellPower + Math.floor(Math.random() * 10);
    console.log(`${this.name} casts a spell for ${damage} magical damage! ✨`);
    return damage;
  }

  // 🧘‍♂️ Meditate to restore mana
  meditate(): void {
    this.mana = Math.min(100, this.mana + 20);
    console.log(`${this.name} meditates and restores mana. Current: ${this.mana} 🧘‍♂️`);
  }
}

// ⚔️ Warrior class - combat focused
class Warrior extends GameCharacter {
  armor: number;
  strength: number;

  constructor(name: string) {
    super(name);
    this.armor = 25;
    this.strength = 20;
  }

  // 🛡️ Defensive stance
  defendersStance(): void {
    console.log(`${this.name} takes a defensive stance! 🛡️`);
    this.armor += 10;
    
    // 🕐 Remove bonus after some time (simplified)
    setTimeout(() => {
      this.armor -= 10;
      console.log(`${this.name}'s defensive stance ends.`);
    }, 3000);
  }

  // 💥 Power attack
  powerAttack(): number {
    const damage = this.strength + Math.floor(Math.random() * 15) + 10;
    console.log(`${this.name} performs a powerful attack for ${damage} damage! 💥`);
    return damage;
  }

  // 🛡️ Override takeDamage to account for armor
  takeDamage(damage: number): void {
    const reducedDamage = Math.max(1, damage - this.armor);
    super.takeDamage(reducedDamage);
    console.log(`🛡️ Armor reduced damage from ${damage} to ${reducedDamage}`);
  }
}

// 🎮 Let's play!
const gandalf = new Wizard("Gandalf");
const conan = new Warrior("Conan");

gandalf.castSpell(); // Magical attack!
conan.powerAttack(); // Physical attack!
conan.defendersStance(); // Defensive move!

🎯 Try it yourself: Add a Rogue class with stealth and backstab abilities!

🏪 Example 2: E-commerce Product System

Let’s create a product hierarchy for an online store:

// 🛍️ Base product class
class Product {
  id: string;
  name: string;
  price: number;
  category: string;
  inStock: boolean;

  constructor(id: string, name: string, price: number, category: string) {
    this.id = id;
    this.name = name;
    this.price = price;
    this.category = category;
    this.inStock = true;
  }

  // 💰 Get formatted price
  getFormattedPrice(): string {
    return `$${this.price.toFixed(2)} 💰`;
  }

  // 📦 Check availability
  checkAvailability(): boolean {
    return this.inStock;
  }

  // 🏷️ Apply discount
  applyDiscount(percentage: number): void {
    if (percentage > 0 && percentage <= 100) {
      this.price = this.price * (1 - percentage / 100);
      console.log(`🎊 ${percentage}% discount applied! New price: ${this.getFormattedPrice()}`);
    }
  }

  // 📋 Get product summary
  getSummary(): string {
    return `${this.name} - ${this.getFormattedPrice()} [${this.category}] 📦`;
  }
}

// 👕 Clothing product
class Clothing extends Product {
  size: string;
  color: string;
  material: string;

  constructor(id: string, name: string, price: number, size: string, color: string, material: string) {
    super(id, name, price, "Clothing");
    this.size = size;
    this.color = color;
    this.material = material;
  }

  // 👔 Get clothing details
  getClothingDetails(): string {
    return `Size: ${this.size}, Color: ${this.color}, Material: ${this.material} 👔`;
  }

  // 🧺 Washing instructions
  getWashingInstructions(): string {
    const instructions = {
      cotton: "Machine wash cold, tumble dry low 🧺",
      silk: "Dry clean only ✨",
      wool: "Hand wash cold, lay flat to dry 🐑",
      polyester: "Machine wash warm, tumble dry medium 🔄"
    };
    
    return instructions[this.material.toLowerCase()] || "Follow care label instructions 📝";
  }
}

// 📱 Electronics product
class Electronics extends Product {
  brand: string;
  warranty: number; // in months
  powerRating: string;

  constructor(id: string, name: string, price: number, brand: string, warranty: number, powerRating: string) {
    super(id, name, price, "Electronics");
    this.brand = brand;
    this.warranty = warranty;
    this.powerRating = powerRating;
  }

  // 🔧 Get tech specs
  getTechSpecs(): string {
    return `Brand: ${this.brand}, Warranty: ${this.warranty} months, Power: ${this.powerRating} ⚡`;
  }

  // 🛡️ Extended warranty
  extendWarranty(additionalMonths: number): void {
    this.warranty += additionalMonths;
    console.log(`🛡️ Warranty extended! New warranty: ${this.warranty} months`);
  }

  // 🔋 Power efficiency rating
  getPowerEfficiency(): string {
    const rating = this.powerRating.toLowerCase();
    if (rating.includes("low") || rating.includes("5w")) return "Excellent 🌟";
    if (rating.includes("medium") || rating.includes("15w")) return "Good 👍";
    return "Standard ⚡";
  }
}

// 🛒 Let's go shopping!
const tshirt = new Clothing("C001", "Cool TypeScript T-Shirt", 29.99, "L", "Blue", "Cotton");
const laptop = new Electronics("E001", "DevBook Pro", 1299.99, "TechCorp", 24, "65W");

console.log(tshirt.getSummary()); // Product info
console.log(tshirt.getClothingDetails()); // Clothing-specific info
console.log(tshirt.getWashingInstructions()); // Care instructions

console.log(laptop.getSummary()); // Product info  
console.log(laptop.getTechSpecs()); // Electronics-specific info
laptop.extendWarranty(12); // Extend warranty

// 🎊 Apply discounts
tshirt.applyDiscount(20); // 20% off clothing
laptop.applyDiscount(10); // 10% off electronics

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: Protected Members

When building inheritance hierarchies, you often want to share data between parent and child classes, but not expose it publicly:

// 🏦 Bank account hierarchy
class BankAccount {
  protected accountNumber: string; // 🔒 Protected - accessible by children
  protected balance: number;
  private pin: string; // 🚫 Private - only this class

  constructor(accountNumber: string, initialBalance: number, pin: string) {
    this.accountNumber = accountNumber;
    this.balance = initialBalance;
    this.pin = pin;
  }

  // 🔍 Public method to check balance
  public getBalance(): number {
    return this.balance;
  }

  // 🔒 Protected method - children can use this
  protected validateTransaction(amount: number): boolean {
    return amount > 0 && amount <= this.balance;
  }
}

// 💳 Savings account with interest
class SavingsAccount extends BankAccount {
  private interestRate: number;

  constructor(accountNumber: string, initialBalance: number, pin: string, interestRate: number) {
    super(accountNumber, initialBalance, pin);
    this.interestRate = interestRate;
  }

  // 💰 Add interest - uses protected balance
  addInterest(): void {
    const interest = this.balance * (this.interestRate / 100);
    this.balance += interest; // ✅ Can access protected member
    console.log(`💰 Interest added: $${interest.toFixed(2)}. New balance: $${this.balance.toFixed(2)}`);
  }

  // 🏦 Withdraw with validation - uses protected method
  withdraw(amount: number): boolean {
    if (this.validateTransaction(amount)) { // ✅ Can use protected method
      this.balance -= amount;
      console.log(`💸 Withdrew $${amount}. New balance: $${this.balance.toFixed(2)}`);
      return true;
    }
    console.log("❌ Invalid transaction");
    return false;
  }
}

🏗️ Advanced Topic 2: Abstract Base Classes

Sometimes you want to create a base class that should never be instantiated directly:

// 🎨 Abstract shape class - blueprint only
abstract class Shape {
  protected x: number;
  protected y: number;

  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }

  // 📍 Concrete method - all shapes can move
  move(deltaX: number, deltaY: number): void {
    this.x += deltaX;
    this.y += deltaY;
    console.log(`🔄 Moved to (${this.x}, ${this.y})`);
  }

  // 🎯 Abstract methods - must be implemented by children
  abstract getArea(): number;
  abstract getPerimeter(): number;
  abstract draw(): void;
}

// 🔵 Circle implementation
class Circle extends Shape {
  private radius: number;

  constructor(x: number, y: number, radius: number) {
    super(x, y);
    this.radius = radius;
  }

  getArea(): number {
    return Math.PI * this.radius * this.radius;
  }

  getPerimeter(): number {
    return 2 * Math.PI * this.radius;
  }

  draw(): void {
    console.log(`🔵 Drawing circle at (${this.x}, ${this.y}) with radius ${this.radius}`);
  }
}

// 🔷 Rectangle implementation
class Rectangle extends Shape {
  private width: number;
  private height: number;

  constructor(x: number, y: number, width: number, height: number) {
    super(x, y);
    this.width = width;
    this.height = height;
  }

  getArea(): number {
    return this.width * this.height;
  }

  getPerimeter(): number {
    return 2 * (this.width + this.height);
  }

  draw(): void {
    console.log(`🔷 Drawing rectangle at (${this.x}, ${this.y}) - ${this.width}x${this.height}`);
  }
}

// 🎨 Using our shapes
const circle = new Circle(10, 20, 5);
const rectangle = new Rectangle(0, 0, 10, 8);

circle.draw(); // 🔵 Drawing circle...
console.log(`Circle area: ${circle.getArea().toFixed(2)} 📐`);

rectangle.move(5, 5); // 🔄 Moved to (5, 5)
rectangle.draw(); // 🔷 Drawing rectangle...

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Forgetting to Call super()

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

  constructor(name: string, age: number, studentId: string) {
    // Missing super(name, age) - This will cause an error!
    this.studentId = studentId;
  }
}

// ✅ Correct way - always call super()!
class GoodStudent extends Person {
  studentId: string;

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

🤯 Pitfall 2: Overusing Inheritance

// ❌ Dangerous - too many inheritance levels!
class Animal { }
class Mammal extends Animal { }
class Carnivore extends Mammal { }
class Feline extends Carnivore { }
class BigCat extends Feline { }
class Lion extends BigCat { } // 😵 Too deep!

// ✅ Better - use composition when appropriate!
interface Carnivorous {
  hunt(): void;
}

interface Feline {
  purr(): void;
  retractClaws(): void;
}

class Lion extends Animal implements Carnivorous, Feline {
  hunt(): void {
    console.log("🦁 Lion hunts for prey!");
  }

  purr(): void {
    console.log("😺 Lion purrs contentedly");
  }

  retractClaws(): void {
    console.log("🐾 Lion retracts claws");
  }
}

🔄 Pitfall 3: Not Understanding Method Resolution

class Parent {
  greet(): string {
    return "Hello from Parent! 👋";
  }
}

class Child extends Parent {
  greet(): string {
    return "Hello from Child! 👶";
  }

  // ❌ Common confusion - which greet() gets called?
  confusingMethod(): void {
    console.log(this.greet()); // Will call Child's greet(), not Parent's!
  }

  // ✅ Correct - explicitly call parent method when needed
  clarMethod(): void {
    console.log(super.greet()); // Calls Parent's greet()
    console.log(this.greet());  // Calls Child's greet()
  }
}

🛠️ Best Practices

1. 🎯 Favor Composition Over Inheritance: Don’t inherit just to reuse code
2. 📝 Keep Hierarchies Shallow: Avoid deep inheritance chains (max 3-4 levels)
3. 🛡️ Use Protected Wisely: Share data with children, not the world
4. ✨ Call super() First: Always call parent constructor before your code
5. 🎨 Consider Interfaces: Sometimes interface implementation is better than inheritance

🧪 Hands-On Exercise

🎯 Challenge: Build a Media Library System

Create a type-safe media library with inheritance:

📋 Requirements:

• ✅ Base MediaItem class with title, duration, rating
• 🎬 Movie class with director, genre, cast
• 🎵 Song class with artist, album, genre
• 📚 Audiobook class with author, narrator, chapters
• 🎮 Each item needs appropriate emoji and methods!

🚀 Bonus Points:

• Add a Playlist class that can contain any media type
• Implement rating system and reviews
• Add search and filter functionality

💡 Solution

// 🎭 Base media item class
abstract class MediaItem {
  title: string;
  duration: number; // in minutes
  rating: number; // 1-5 stars
  dateAdded: Date;
  
  constructor(title: string, duration: number) {
    this.title = title;
    this.duration = duration;
    this.rating = 0;
    this.dateAdded = new Date();
  }

  // ⭐ Set rating
  setRating(rating: number): void {
    if (rating >= 1 && rating <= 5) {
      this.rating = rating;
      console.log(`⭐ Rated "${this.title}": ${rating}/5 stars`);
    }
  }

  // 🕐 Get formatted duration
  getFormattedDuration(): string {
    const hours = Math.floor(this.duration / 60);
    const minutes = this.duration % 60;
    return hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
  }

  // 📊 Abstract methods
  abstract getInfo(): string;
  abstract getCategory(): string;
  abstract play(): void;
}

// 🎬 Movie class
class Movie extends MediaItem {
  director: string;
  genre: string;
  cast: string[];
  year: number;

  constructor(title: string, duration: number, director: string, genre: string, cast: string[], year: number) {
    super(title, duration);
    this.director = director;
    this.genre = genre;
    this.cast = cast;
    this.year = year;
  }

  getCategory(): string {
    return "Movie 🎬";
  }

  getInfo(): string {
    return `🎬 ${this.title} (${this.year})
📽️ Director: ${this.director}
🎭 Genre: ${this.genre}
⏱️ Duration: ${this.getFormattedDuration()}
🌟 Cast: ${this.cast.join(", ")}
⭐ Rating: ${this.rating}/5`;
  }

  play(): void {
    console.log(`🎬 Now playing: "${this.title}" directed by ${this.director}`);
  }

  // 🏆 Get Oscar potential
  getOscarPotential(): string {
    if (this.rating >= 4.5) return "Oscar worthy! 🏆";
    if (this.rating >= 4.0) return "Strong contender 🥇";
    if (this.rating >= 3.5) return "Decent film 👍";
    return "Popcorn movie 🍿";
  }
}

// 🎵 Song class
class Song extends MediaItem {
  artist: string;
  album: string;
  genre: string;
  year: number;

  constructor(title: string, duration: number, artist: string, album: string, genre: string, year: number) {
    super(title, duration);
    this.artist = artist;
    this.album = album;
    this.genre = genre;
    this.year = year;
  }

  getCategory(): string {
    return "Song 🎵";
  }

  getInfo(): string {
    return `🎵 ${this.title}
🎤 Artist: ${this.artist}
💿 Album: ${this.album}
🎼 Genre: ${this.genre}
📅 Year: ${this.year}
⏱️ Duration: ${this.getFormattedDuration()}
⭐ Rating: ${this.rating}/5`;
  }

  play(): void {
    console.log(`🎵 Now playing: "${this.title}" by ${this.artist}`);
  }

  // 🔥 Check if it's a hit
  isHit(): boolean {
    return this.rating >= 4.0 && this.duration <= 4; // Great rating, not too long
  }
}

// 📚 Audiobook class
class Audiobook extends MediaItem {
  author: string;
  narrator: string;
  chapters: number;
  genre: string;

  constructor(title: string, duration: number, author: string, narrator: string, chapters: number, genre: string) {
    super(title, duration);
    this.author = author;
    this.narrator = narrator;
    this.chapters = chapters;
    this.genre = genre;
  }

  getCategory(): string {
    return "Audiobook 📚";
  }

  getInfo(): string {
    return `📚 ${this.title}
✍️ Author: ${this.author}
🎙️ Narrator: ${this.narrator}
📑 Chapters: ${this.chapters}
🏷️ Genre: ${this.genre}
⏱️ Duration: ${this.getFormattedDuration()}
⭐ Rating: ${this.rating}/5`;
  }

  play(): void {
    console.log(`📚 Now playing: "${this.title}" by ${this.author}, narrated by ${this.narrator}`);
  }

  // 📖 Average chapter length
  getAverageChapterLength(): string {
    const avgMinutes = Math.round(this.duration / this.chapters);
    return `${avgMinutes} minutes per chapter`;
  }
}

// 🗂️ Media library management
class MediaLibrary {
  private items: MediaItem[] = [];

  addItem(item: MediaItem): void {
    this.items.push(item);
    console.log(`➕ Added ${item.getCategory()}: "${item.title}"`);
  }

  searchByTitle(title: string): MediaItem[] {
    return this.items.filter(item => 
      item.title.toLowerCase().includes(title.toLowerCase())
    );
  }

  getByCategory(category: string): MediaItem[] {
    return this.items.filter(item => 
      item.getCategory().toLowerCase().includes(category.toLowerCase())
    );
  }

  getTopRated(count: number = 5): MediaItem[] {
    return this.items
      .filter(item => item.rating > 0)
      .sort((a, b) => b.rating - a.rating)
      .slice(0, count);
  }

  getTotalDuration(): string {
    const totalMinutes = this.items.reduce((sum, item) => sum + item.duration, 0);
    const hours = Math.floor(totalMinutes / 60);
    const minutes = totalMinutes % 60;
    return `${hours}h ${minutes}m of content! 📊`;
  }

  showLibrary(): void {
    console.log("🗂️ Media Library Contents:");
    this.items.forEach((item, index) => {
      console.log(`${index + 1}. ${item.getCategory()}: "${item.title}" ⭐${item.rating}/5`);
    });
    console.log(`\n📊 Total: ${this.items.length} items, ${this.getTotalDuration()}`);
  }
}

// 🎮 Let's build our library!
const library = new MediaLibrary();

// Add some content
const movie = new Movie("The TypeScript Chronicles", 142, "Code Director", "Sci-Fi", ["Dev Hero", "Bug Villain"], 2023);
const song = new Song("Async Await Blues", 3, "The Promises", "Callback Hell", "Tech Rock", 2022);
const audiobook = new Audiobook("Clean Code", 720, "Robert Martin", "Tech Narrator", 24, "Programming");

movie.setRating(5);
song.setRating(4);
audiobook.setRating(5);

library.addItem(movie);
library.addItem(song);
library.addItem(audiobook);

// Explore our library
library.showLibrary();
console.log("\n🏆 Top rated content:");
library.getTopRated(3).forEach(item => console.log(item.getInfo()));

🎓 Key Takeaways

You’ve learned so much about inheritance! Here’s what you can now do:

• ✅ Create class hierarchies with confidence 💪
• ✅ Use extends keyword properly 🏗️
• ✅ Call parent constructors with super() 📞
• ✅ Share code effectively between related classes ♻️
• ✅ Apply inheritance in real-world scenarios 🎯

Remember: Inheritance is a powerful tool, but use it wisely! Sometimes composition is better than inheritance. 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered TypeScript inheritance!

Here’s what to do next:

1. 💻 Practice with the game character exercise above
2. 🏗️ Build your own class hierarchy for a domain you’re interested in
3. 📚 Move on to our next tutorial: Super Keyword: Calling Parent Class Members
4. 🌟 Experiment with abstract classes and protected members!

Remember: Every TypeScript expert started with classes and inheritance. Keep building, keep learning, and most importantly, have fun! 🚀

Happy coding! 🎉🚀✨