🔀 Implementing Multiple Interfaces: Composition over Inheritance

🎯 Introduction

Welcome to the powerful world of interface composition! 🎉 In this guide, we’ll explore how implementing multiple interfaces enables you to build flexible, maintainable code that follows the principle of “composition over inheritance.”

You’ll discover how implementing multiple interfaces is like being a master chef 👨‍🍳 - instead of inheriting a fixed recipe, you combine different ingredients (interfaces) to create exactly what you need. Whether you’re building plugin systems 🔌, creating flexible APIs 🌐, or designing modular architectures 🏗️, mastering multiple interface implementation is crucial for scalable TypeScript applications.

By the end of this tutorial, you’ll be confidently composing interfaces to create powerful, flexible designs! Let’s compose! 🏊‍♂️

📚 Understanding Composition over Inheritance

🤔 What is Composition?

Composition is about building complex functionality by combining simple, focused pieces rather than creating deep inheritance hierarchies. It’s like LEGO blocks 🧱 - you build amazing things by combining simple pieces in creative ways.

In TypeScript, composition through interfaces:

• ✨ Provides flexibility to mix and match capabilities
• 🚀 Avoids the fragile base class problem
• 🛡️ Follows the Interface Segregation Principle (ISP)
• 🔧 Makes code more testable and maintainable

💡 Why Choose Composition?

Here’s why developers prefer composition:

1. Flexibility 🤸‍♂️: Change behavior without modifying inheritance chains
2. Reusability ♻️: Combine interfaces in different ways
3. Testability 🧪: Mock individual interfaces easily
4. Clarity 🎯: Each interface has a single responsibility

Real-world example: Think of a smartphone 📱. Instead of inheriting from a “Device” class, it implements interfaces like Callable, Messageable, Photographable, and Browsable. Each capability is independent and can be combined differently for different devices.

🔧 Basic Multiple Interface Implementation

📝 Simple Example

Let’s start with a friendly example:

// 🎯 Define focused interfaces
interface Drivable {
  speed: number;
  drive(): void;
  brake(): void;
}

interface Flyable {
  altitude: number;
  fly(): void;
  land(): void;
}

interface Swimmable {
  depth: number;
  swim(): void;
  surface(): void;
}

// 🚗 Regular car implements only Drivable
class Car implements Drivable {
  speed: number = 0;

  drive(): void {
    this.speed = 60;
    console.log('🚗 Driving on the road at', this.speed, 'mph');
  }

  brake(): void {
    this.speed = 0;
    console.log('🛑 Car stopped');
  }
}

// ✈️ Airplane implements both Drivable and Flyable
class Airplane implements Drivable, Flyable {
  speed: number = 0;
  altitude: number = 0;

  drive(): void {
    this.speed = 30;
    console.log('🛩️ Taxiing on runway at', this.speed, 'mph');
  }

  brake(): void {
    this.speed = 0;
    console.log('🛑 Airplane stopped on runway');
  }

  fly(): void {
    this.speed = 500;
    this.altitude = 30000;
    console.log('✈️ Flying at', this.altitude, 'feet,', this.speed, 'mph');
  }

  land(): void {
    this.altitude = 0;
    this.speed = 150;
    console.log('🛬 Landing...');
  }
}

// 🚁 Amphibious vehicle implements all three!
class AmphibiousVehicle implements Drivable, Flyable, Swimmable {
  speed: number = 0;
  altitude: number = 0;
  depth: number = 0;

  drive(): void {
    this.speed = 45;
    console.log('🚙 Driving on land at', this.speed, 'mph');
  }

  brake(): void {
    this.speed = 0;
    console.log('🛑 Stopped on land');
  }

  fly(): void {
    this.speed = 120;
    this.altitude = 5000;
    console.log('🚁 Flying at', this.altitude, 'feet');
  }

  land(): void {
    this.altitude = 0;
    console.log('🛬 Landed safely');
  }

  swim(): void {
    this.depth = -10;
    this.speed = 25;
    console.log('🏊 Swimming at', Math.abs(this.depth), 'feet underwater');
  }

  surface(): void {
    this.depth = 0;
    console.log('🌊 Surfaced!');
  }
}

// 🎯 Functions can work with specific capabilities
function race(vehicle: Drivable): void {
  console.log('🏁 Starting race!');
  vehicle.drive();
}

function airShow(aircraft: Flyable): void {
  console.log('🎪 Air show performance!');
  aircraft.fly();
  aircraft.land();
}

function underwaterExploration(submarine: Swimmable): void {
  console.log('🤿 Underwater exploration!');
  submarine.swim();
  submarine.surface();
}

// ✨ Works with any vehicle that can drive
const car = new Car();
const plane = new Airplane();
const amphibious = new AmphibiousVehicle();

race(car);         // ✅ Works
race(plane);       // ✅ Works  
race(amphibious);  // ✅ Works

airShow(plane);       // ✅ Works
airShow(amphibious);  // ✅ Works
// airShow(car);      // ❌ Error: Car doesn't fly!

underwaterExploration(amphibious); // ✅ Works
// underwaterExploration(plane);    // ❌ Error: Planes don't swim!

🏗️ Real-World Example: Plugin System

Let’s build a more complex example with a plugin system:

// 🔌 Plugin system interfaces
interface Plugin {
  name: string;
  version: string;
  initialize(): Promise<void>;
  destroy(): Promise<void>;
}

interface Configurable {
  config: Record<string, any>;
  configure(options: Record<string, any>): void;
  getConfig(): Record<string, any>;
}

interface EventEmitter {
  on(event: string, handler: Function): void;
  off(event: string, handler: Function): void;
  emit(event: string, ...args: any[]): void;
}

interface Loggable {
  logLevel: 'debug' | 'info' | 'warn' | 'error';
  log(level: string, message: string, ...args: any[]): void;
}

interface Hookable {
  hooks: Map<string, Function[]>;
  addHook(name: string, fn: Function): void;
  removeHook(name: string, fn: Function): void;
  executeHooks(name: string, ...args: any[]): Promise<void>;
}

// 🎯 Base plugin implementation
abstract class BasePlugin implements Plugin, Configurable, EventEmitter, Loggable {
  name: string;
  version: string;
  config: Record<string, any> = {};
  logLevel: 'debug' | 'info' | 'warn' | 'error' = 'info';
  
  private listeners: Map<string, Set<Function>> = new Map();

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

  abstract initialize(): Promise<void>;
  abstract destroy(): Promise<void>;

  configure(options: Record<string, any>): void {
    this.config = { ...this.config, ...options };
    this.log('info', `${this.name} configured with:`, options);
    this.emit('configured', this.config);
  }

  getConfig(): Record<string, any> {
    return { ...this.config };
  }

  on(event: string, handler: Function): void {
    if (!this.listeners.has(event)) {
      this.listeners.set(event, new Set());
    }
    this.listeners.get(event)!.add(handler);
  }

  off(event: string, handler: Function): void {
    this.listeners.get(event)?.delete(handler);
  }

  emit(event: string, ...args: any[]): void {
    this.listeners.get(event)?.forEach(handler => {
      try {
        handler(...args);
      } catch (error) {
        this.log('error', `Error in event handler for ${event}:`, error);
      }
    });
  }

  log(level: string, message: string, ...args: any[]): void {
    const levels = ['debug', 'info', 'warn', 'error'];
    const currentLevelIndex = levels.indexOf(this.logLevel);
    const messageLevelIndex = levels.indexOf(level);

    if (messageLevelIndex >= currentLevelIndex) {
      const timestamp = new Date().toISOString();
      console.log(`[${timestamp}] [${this.name}] [${level.toUpperCase()}] ${message}`, ...args);
    }
  }
}

// 🔒 Authentication plugin
class AuthPlugin extends BasePlugin implements Hookable {
  hooks: Map<string, Function[]> = new Map();
  private users: Map<string, { password: string; roles: string[] }> = new Map();

  constructor() {
    super('AuthPlugin', '1.0.0');
  }

  async initialize(): Promise<void> {
    this.log('info', '🔐 Initializing authentication plugin');
    
    // Set up default hooks
    this.addHook('beforeAuth', async (username: string) => {
      this.log('debug', `Attempting to authenticate user: ${username}`);
    });

    this.addHook('afterAuth', async (username: string, success: boolean) => {
      this.log('info', `Authentication ${success ? 'succeeded' : 'failed'} for ${username}`);
    });

    this.emit('initialized');
  }

  async destroy(): Promise<void> {
    this.log('info', '🔒 Destroying authentication plugin');
    this.users.clear();
    this.hooks.clear();
    this.emit('destroyed');
  }

  addHook(name: string, fn: Function): void {
    if (!this.hooks.has(name)) {
      this.hooks.set(name, []);
    }
    this.hooks.get(name)!.push(fn);
  }

  removeHook(name: string, fn: Function): void {
    const hooks = this.hooks.get(name);
    if (hooks) {
      const index = hooks.indexOf(fn);
      if (index > -1) {
        hooks.splice(index, 1);
      }
    }
  }

  async executeHooks(name: string, ...args: any[]): Promise<void> {
    const hooks = this.hooks.get(name) || [];
    for (const hook of hooks) {
      await hook(...args);
    }
  }

  async authenticate(username: string, password: string): Promise<boolean> {
    await this.executeHooks('beforeAuth', username);
    
    const user = this.users.get(username);
    const success = user?.password === password;
    
    await this.executeHooks('afterAuth', username, success);
    this.emit('authAttempt', { username, success });
    
    return success;
  }

  addUser(username: string, password: string, roles: string[] = []): void {
    this.users.set(username, { password, roles });
    this.log('info', `👤 User ${username} added with roles: ${roles.join(', ')}`);
  }
}

// 💾 Caching plugin
interface Cacheable {
  cache: Map<string, { value: any; expiry: number }>;
  get(key: string): any;
  set(key: string, value: any, ttl?: number): void;
  delete(key: string): void;
  clear(): void;
}

class CachePlugin extends BasePlugin implements Cacheable, Hookable {
  cache: Map<string, { value: any; expiry: number }> = new Map();
  hooks: Map<string, Function[]> = new Map();

  constructor() {
    super('CachePlugin', '1.0.0');
  }

  async initialize(): Promise<void> {
    this.log('info', '💾 Initializing cache plugin');
    
    // Clean up expired entries every minute
    setInterval(() => this.cleanExpired(), 60000);
    
    this.emit('initialized');
  }

  async destroy(): Promise<void> {
    this.log('info', '🗑️ Destroying cache plugin');
    this.clear();
    this.emit('destroyed');
  }

  get(key: string): any {
    const entry = this.cache.get(key);
    
    if (!entry) {
      this.log('debug', `Cache miss for key: ${key}`);
      return undefined;
    }

    if (entry.expiry && entry.expiry < Date.now()) {
      this.delete(key);
      this.log('debug', `Cache expired for key: ${key}`);
      return undefined;
    }

    this.log('debug', `Cache hit for key: ${key}`);
    this.emit('cacheHit', key);
    return entry.value;
  }

  set(key: string, value: any, ttl?: number): void {
    const expiry = ttl ? Date.now() + ttl * 1000 : 0;
    this.cache.set(key, { value, expiry });
    this.log('debug', `Cached key: ${key}${ttl ? ` (TTL: ${ttl}s)` : ''}`);
    this.emit('cacheSet', key, value);
  }

  delete(key: string): void {
    this.cache.delete(key);
    this.log('debug', `Deleted cache key: ${key}`);
    this.emit('cacheDelete', key);
  }

  clear(): void {
    const size = this.cache.size;
    this.cache.clear();
    this.log('info', `🧹 Cleared ${size} cache entries`);
    this.emit('cacheClear');
  }

  private cleanExpired(): void {
    const now = Date.now();
    let cleaned = 0;

    for (const [key, entry] of this.cache) {
      if (entry.expiry && entry.expiry < now) {
        this.cache.delete(key);
        cleaned++;
      }
    }

    if (cleaned > 0) {
      this.log('debug', `🧹 Cleaned ${cleaned} expired cache entries`);
    }
  }

  addHook(name: string, fn: Function): void {
    if (!this.hooks.has(name)) {
      this.hooks.set(name, []);
    }
    this.hooks.get(name)!.push(fn);
  }

  removeHook(name: string, fn: Function): void {
    const hooks = this.hooks.get(name);
    if (hooks) {
      const index = hooks.indexOf(fn);
      if (index > -1) {
        hooks.splice(index, 1);
      }
    }
  }

  async executeHooks(name: string, ...args: any[]): Promise<void> {
    const hooks = this.hooks.get(name) || [];
    for (const hook of hooks) {
      await hook(...args);
    }
  }
}

// 📊 Analytics plugin
interface Trackable {
  track(event: string, properties?: Record<string, any>): void;
  identify(userId: string, traits?: Record<string, any>): void;
  page(name: string, properties?: Record<string, any>): void;
}

class AnalyticsPlugin extends BasePlugin implements Trackable {
  private events: Array<{
    type: string;
    name: string;
    properties?: Record<string, any>;
    timestamp: Date;
  }> = [];

  constructor() {
    super('AnalyticsPlugin', '1.0.0');
  }

  async initialize(): Promise<void> {
    this.log('info', '📊 Initializing analytics plugin');
    this.emit('initialized');
  }

  async destroy(): Promise<void> {
    this.log('info', '📊 Destroying analytics plugin');
    
    // Send remaining events
    if (this.events.length > 0) {
      await this.flush();
    }
    
    this.emit('destroyed');
  }

  track(event: string, properties?: Record<string, any>): void {
    this.events.push({
      type: 'track',
      name: event,
      properties,
      timestamp: new Date()
    });
    
    this.log('debug', `📊 Tracked event: ${event}`, properties);
    this.emit('eventTracked', event, properties);
    
    // Auto-flush after 100 events
    if (this.events.length >= 100) {
      this.flush();
    }
  }

  identify(userId: string, traits?: Record<string, any>): void {
    this.events.push({
      type: 'identify',
      name: userId,
      properties: traits,
      timestamp: new Date()
    });
    
    this.log('info', `👤 Identified user: ${userId}`, traits);
    this.emit('userIdentified', userId, traits);
  }

  page(name: string, properties?: Record<string, any>): void {
    this.events.push({
      type: 'page',
      name,
      properties,
      timestamp: new Date()
    });
    
    this.log('debug', `📄 Page view: ${name}`, properties);
    this.emit('pageViewed', name, properties);
  }

  private async flush(): Promise<void> {
    const eventsToSend = [...this.events];
    this.events = [];
    
    this.log('info', `📤 Flushing ${eventsToSend.length} analytics events`);
    
    // Simulate sending to analytics service
    await new Promise(resolve => setTimeout(resolve, 100));
    
    this.emit('eventsFlushed', eventsToSend.length);
  }

  getEventStats(): Record<string, number> {
    const stats: Record<string, number> = {};
    
    this.events.forEach(event => {
      const key = `${event.type}:${event.name}`;
      stats[key] = (stats[key] || 0) + 1;
    });
    
    return stats;
  }
}

🎨 Advanced Composition Patterns

🔧 Mixin Pattern with Interfaces

TypeScript supports mixins for even more flexible composition:

// 🎯 Define capability interfaces
interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
  touch(): void;
}

interface Serializable {
  serialize(): string;
  deserialize(data: string): void;
}

interface Validatable {
  errors: string[];
  validate(): boolean;
  getErrors(): string[];
}

interface Observable {
  observers: Array<(data: any) => void>;
  subscribe(observer: (data: any) => void): () => void;
  notify(data: any): void;
}

// 🏗️ Mixin implementation functions
function TimestampedMixin<T extends new (...args: any[]) => {}>(Base: T) {
  return class extends Base implements Timestamped {
    createdAt: Date = new Date();
    updatedAt: Date = new Date();

    touch(): void {
      this.updatedAt = new Date();
      console.log(`⏰ Updated at ${this.updatedAt.toISOString()}`);
    }
  };
}

function SerializableMixin<T extends new (...args: any[]) => {}>(Base: T) {
  return class extends Base implements Serializable {
    serialize(): string {
      const data = Object.assign({}, this);
      return JSON.stringify(data);
    }

    deserialize(data: string): void {
      const parsed = JSON.parse(data);
      Object.assign(this, parsed);
      console.log('📄 Deserialized from:', data);
    }
  };
}

function ValidatableMixin<T extends new (...args: any[]) => {}>(Base: T) {
  return class extends Base implements Validatable {
    errors: string[] = [];

    validate(): boolean {
      this.errors = [];
      // Override in subclasses for specific validation
      return true;
    }

    getErrors(): string[] {
      return [...this.errors];
    }

    protected addError(error: string): void {
      this.errors.push(error);
    }
  };
}

function ObservableMixin<T extends new (...args: any[]) => {}>(Base: T) {
  return class extends Base implements Observable {
    observers: Array<(data: any) => void> = [];

    subscribe(observer: (data: any) => void): () => void {
      this.observers.push(observer);
      console.log(`👁️ Observer subscribed. Total: ${this.observers.length}`);
      
      // Return unsubscribe function
      return () => {
        const index = this.observers.indexOf(observer);
        if (index > -1) {
          this.observers.splice(index, 1);
          console.log(`👁️ Observer unsubscribed. Remaining: ${this.observers.length}`);
        }
      };
    }

    notify(data: any): void {
      this.observers.forEach(observer => {
        try {
          observer(data);
        } catch (error) {
          console.error('❌ Observer error:', error);
        }
      });
    }
  };
}

// 🎨 Compose mixins to create powerful classes
class BaseModel {
  constructor(public id: string) {}
}

// Create a model with all capabilities
class User extends ObservableMixin(
  ValidatableMixin(
    SerializableMixin(
      TimestampedMixin(BaseModel)
    )
  )
) {
  constructor(
    id: string,
    public username: string,
    public email: string,
    public age: number
  ) {
    super(id);
  }

  validate(): boolean {
    this.errors = [];

    if (!this.username || this.username.length < 3) {
      this.addError('Username must be at least 3 characters');
    }

    if (!this.email || !this.email.includes('@')) {
      this.addError('Invalid email address');
    }

    if (this.age < 18) {
      this.addError('Must be at least 18 years old');
    }

    const isValid = this.errors.length === 0;
    this.notify({ type: 'validation', isValid, errors: this.errors });
    
    return isValid;
  }

  updateEmail(newEmail: string): void {
    const oldEmail = this.email;
    this.email = newEmail;
    this.touch();
    this.notify({ 
      type: 'emailChanged', 
      oldEmail, 
      newEmail,
      timestamp: this.updatedAt
    });
  }
}

// 🚀 Use the composed class
const user = new User('usr_001', 'john_doe', '[email protected]', 25);

// Subscribe to changes
const unsubscribe = user.subscribe((data) => {
  console.log('📢 User event:', data);
});

// Validate
console.log('✅ Is valid?', user.validate());

// Update and notify
user.updateEmail('[email protected]');

// Serialize
const serialized = user.serialize();
console.log('📄 Serialized:', serialized);

// Create new user from serialized data
const newUser = new User('', '', '', 0);
newUser.deserialize(serialized);

// Check timestamps
console.log('🕐 Created:', newUser.createdAt);
console.log('🕐 Updated:', newUser.updatedAt);

// Unsubscribe
unsubscribe();

🌟 Role-Based Composition

Let’s create a game character system using composition:

// 🎮 Game character interfaces
interface Health {
  currentHealth: number;
  maxHealth: number;
  takeDamage(amount: number): void;
  heal(amount: number): void;
  isDead(): boolean;
}

interface Mana {
  currentMana: number;
  maxMana: number;
  useMana(amount: number): boolean;
  restoreMana(amount: number): void;
}

interface Attacker {
  attackPower: number;
  attackSpeed: number;
  attack(target: Health): void;
}

interface Defender {
  defense: number;
  blockChance: number;
  block(): boolean;
}

interface Caster {
  spellPower: number;
  castTime: number;
  castSpell(spell: Spell, target?: Health): void;
}

interface Spell {
  name: string;
  manaCost: number;
  damage?: number;
  heal?: number;
  effect?: (target: any) => void;
}

interface Movable {
  position: { x: number; y: number };
  speed: number;
  moveTo(x: number, y: number): void;
  distanceTo(target: Movable): number;
}

interface Inventory {
  items: Item[];
  gold: number;
  addItem(item: Item): boolean;
  removeItem(itemId: string): boolean;
  useItem(itemId: string): void;
}

interface Item {
  id: string;
  name: string;
  type: 'weapon' | 'armor' | 'consumable' | 'misc';
  value: number;
  effect?: () => void;
}

// 🦸 Base character class
abstract class BaseCharacter implements Health, Movable {
  currentHealth: number;
  maxHealth: number;
  position: { x: number; y: number };
  speed: number;

  constructor(
    public name: string,
    maxHealth: number,
    speed: number,
    position: { x: number; y: number } = { x: 0, y: 0 }
  ) {
    this.maxHealth = maxHealth;
    this.currentHealth = maxHealth;
    this.speed = speed;
    this.position = position;
  }

  takeDamage(amount: number): void {
    this.currentHealth = Math.max(0, this.currentHealth - amount);
    console.log(`💔 ${this.name} takes ${amount} damage! HP: ${this.currentHealth}/${this.maxHealth}`);
    
    if (this.isDead()) {
      console.log(`☠️ ${this.name} has died!`);
    }
  }

  heal(amount: number): void {
    const healedAmount = Math.min(amount, this.maxHealth - this.currentHealth);
    this.currentHealth += healedAmount;
    console.log(`💚 ${this.name} healed for ${healedAmount}! HP: ${this.currentHealth}/${this.maxHealth}`);
  }

  isDead(): boolean {
    return this.currentHealth <= 0;
  }

  moveTo(x: number, y: number): void {
    const distance = Math.sqrt(
      Math.pow(x - this.position.x, 2) + 
      Math.pow(y - this.position.y, 2)
    );
    
    const time = distance / this.speed;
    this.position = { x, y };
    console.log(`🏃 ${this.name} moved to (${x}, ${y}) in ${time.toFixed(1)}s`);
  }

  distanceTo(target: Movable): number {
    return Math.sqrt(
      Math.pow(target.position.x - this.position.x, 2) + 
      Math.pow(target.position.y - this.position.y, 2)
    );
  }
}

// ⚔️ Warrior class - physical combat
class Warrior extends BaseCharacter implements Attacker, Defender, Inventory {
  attackPower: number;
  attackSpeed: number;
  defense: number;
  blockChance: number;
  items: Item[] = [];
  gold: number = 0;

  constructor(name: string) {
    super(name, 150, 5);
    this.attackPower = 25;
    this.attackSpeed = 1.5;
    this.defense = 20;
    this.blockChance = 0.3;
  }

  attack(target: Health): void {
    console.log(`⚔️ ${this.name} swings their sword!`);
    
    // Check if target can block
    if ('block' in target && typeof (target as any).block === 'function') {
      if ((target as any).block()) {
        console.log(`🛡️ Attack blocked!`);
        return;
      }
    }
    
    const damage = this.attackPower + Math.floor(Math.random() * 10);
    target.takeDamage(damage);
  }

  block(): boolean {
    const blocked = Math.random() < this.blockChance;
    if (blocked) {
      console.log(`🛡️ ${this.name} blocks the attack!`);
    }
    return blocked;
  }

  takeDamage(amount: number): void {
    const reducedDamage = Math.max(1, amount - this.defense);
    super.takeDamage(reducedDamage);
  }

  addItem(item: Item): boolean {
    if (this.items.length >= 20) {
      console.log(`🎒 ${this.name}'s inventory is full!`);
      return false;
    }
    
    this.items.push(item);
    console.log(`📦 ${this.name} picked up ${item.name}`);
    return true;
  }

  removeItem(itemId: string): boolean {
    const index = this.items.findIndex(item => item.id === itemId);
    if (index > -1) {
      const item = this.items.splice(index, 1)[0];
      console.log(`🗑️ ${this.name} dropped ${item.name}`);
      return true;
    }
    return false;
  }

  useItem(itemId: string): void {
    const item = this.items.find(i => i.id === itemId);
    if (item && item.effect) {
      console.log(`🎯 ${this.name} uses ${item.name}`);
      item.effect();
      
      if (item.type === 'consumable') {
        this.removeItem(itemId);
      }
    }
  }
}

// 🧙 Mage class - magical combat
class Mage extends BaseCharacter implements Mana, Caster, Attacker {
  currentMana: number;
  maxMana: number;
  spellPower: number;
  castTime: number;
  attackPower: number;
  attackSpeed: number;
  
  private spellbook: Spell[] = [];

  constructor(name: string) {
    super(name, 80, 4);
    this.maxMana = 100;
    this.currentMana = 100;
    this.spellPower = 40;
    this.castTime = 2;
    this.attackPower = 10;
    this.attackSpeed = 2;
    
    // Learn basic spells
    this.learnSpell({
      name: 'Fireball',
      manaCost: 20,
      damage: 50
    });
    
    this.learnSpell({
      name: 'Heal',
      manaCost: 30,
      heal: 40
    });
    
    this.learnSpell({
      name: 'Frost Nova',
      manaCost: 40,
      effect: (target) => {
        console.log(`❄️ ${target.name} is frozen!`);
        target.speed *= 0.5;
        setTimeout(() => {
          target.speed *= 2;
          console.log(`🔥 ${target.name} thawed out!`);
        }, 5000);
      }
    });
  }

  useMana(amount: number): boolean {
    if (this.currentMana >= amount) {
      this.currentMana -= amount;
      console.log(`💙 Mana: ${this.currentMana}/${this.maxMana}`);
      return true;
    }
    
    console.log(`💔 Not enough mana! Need ${amount}, have ${this.currentMana}`);
    return false;
  }

  restoreMana(amount: number): void {
    this.currentMana = Math.min(this.maxMana, this.currentMana + amount);
    console.log(`💙 Mana restored! ${this.currentMana}/${this.maxMana}`);
  }

  attack(target: Health): void {
    console.log(`🪄 ${this.name} attacks with staff!`);
    target.takeDamage(this.attackPower);
  }

  castSpell(spell: Spell, target?: Health): void {
    const knownSpell = this.spellbook.find(s => s.name === spell.name);
    
    if (!knownSpell) {
      console.log(`❌ ${this.name} doesn't know ${spell.name}!`);
      return;
    }
    
    if (!this.useMana(spell.manaCost)) {
      return;
    }
    
    console.log(`🎆 ${this.name} casts ${spell.name}!`);
    
    if (spell.damage && target) {
      const totalDamage = spell.damage + this.spellPower;
      target.takeDamage(totalDamage);
    }
    
    if (spell.heal) {
      const healTarget = target || this;
      healTarget.heal(spell.heal + Math.floor(this.spellPower / 2));
    }
    
    if (spell.effect) {
      const effectTarget = target || this;
      spell.effect(effectTarget);
    }
  }

  learnSpell(spell: Spell): void {
    this.spellbook.push(spell);
    console.log(`📚 ${this.name} learned ${spell.name}!`);
  }
}

// 🏹 Ranger class - hybrid combat
class Ranger extends BaseCharacter implements Attacker, Movable, Inventory {
  attackPower: number;
  attackSpeed: number;
  items: Item[] = [];
  gold: number = 0;
  
  private pet?: Pet;

  constructor(name: string) {
    super(name, 100, 7);
    this.attackPower = 20;
    this.attackSpeed = 2.5;
  }

  attack(target: Health): void {
    const distance = 'distanceTo' in target 
      ? this.distanceTo(target as any as Movable)
      : 10;
    
    if (distance > 20) {
      console.log(`🏹 ${this.name} is too far away!`);
      return;
    }
    
    console.log(`🏹 ${this.name} shoots an arrow!`);
    const damage = this.attackPower + (distance < 10 ? 10 : 0);
    target.takeDamage(damage);
    
    // Pet attacks too
    if (this.pet && !this.pet.isDead()) {
      this.pet.attack(target);
    }
  }

  summonPet(petName: string): void {
    this.pet = new Pet(petName, this);
    console.log(`🐺 ${this.name} summons ${petName}!`);
  }

  addItem(item: Item): boolean {
    if (this.items.length >= 15) {
      console.log(`🎒 ${this.name}'s inventory is full!`);
      return false;
    }
    
    this.items.push(item);
    console.log(`📦 ${this.name} picked up ${item.name}`);
    return true;
  }

  removeItem(itemId: string): boolean {
    const index = this.items.findIndex(item => item.id === itemId);
    if (index > -1) {
      const item = this.items.splice(index, 1)[0];
      console.log(`🗑️ ${this.name} dropped ${item.name}`);
      return true;
    }
    return false;
  }

  useItem(itemId: string): void {
    const item = this.items.find(i => i.id === itemId);
    if (item && item.effect) {
      console.log(`🎯 ${this.name} uses ${item.name}`);
      item.effect();
      
      if (item.type === 'consumable') {
        this.removeItem(itemId);
      }
    }
  }
}

// 🐺 Pet companion
class Pet extends BaseCharacter implements Attacker {
  attackPower: number;
  attackSpeed: number;
  
  constructor(name: string, private owner: Ranger) {
    super(name, 60, 8, owner.position);
    this.attackPower = 15;
    this.attackSpeed = 1;
  }

  attack(target: Health): void {
    console.log(`🦷 ${this.name} bites!`);
    target.takeDamage(this.attackPower);
  }

  followOwner(): void {
    this.position = { ...this.owner.position };
    console.log(`🐾 ${this.name} follows ${this.owner.name}`);
  }
}

// 🎮 Game simulation
console.log('⚔️ === BATTLE ARENA === ⚔️\n');

const warrior = new Warrior('Thorin');
const mage = new Mage('Gandalf');
const ranger = new Ranger('Legolas');

// Ranger summons pet
ranger.summonPet('Shadowfang');

// Give warrior some items
warrior.addItem({
  id: 'potion_001',
  name: 'Health Potion',
  type: 'consumable',
  value: 50,
  effect: () => warrior.heal(50)
});

// Battle simulation
console.log('\n🎯 Round 1: Warrior vs Mage');
warrior.moveTo(5, 5);
mage.moveTo(15, 15);

warrior.attack(mage);
mage.castSpell({ name: 'Fireball', manaCost: 20, damage: 50 }, warrior);

console.log('\n🎯 Round 2: Ranger joins!');
ranger.moveTo(10, 20);
ranger.attack(mage);

console.log('\n🎯 Round 3: Mage heals');
mage.castSpell({ name: 'Heal', manaCost: 30, heal: 40 });

console.log('\n🎯 Round 4: Warrior uses potion');
warrior.useItem('potion_001');

console.log('\n📊 Final Status:');
console.log(`${warrior.name}: ${warrior.currentHealth}/${warrior.maxHealth} HP`);
console.log(`${mage.name}: ${mage.currentHealth}/${mage.maxHealth} HP, ${mage.currentMana}/${mage.maxMana} MP`);
console.log(`${ranger.name}: ${ranger.currentHealth}/${ranger.maxHealth} HP`);

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Interface Explosion

// ❌ Wrong - too many small interfaces
interface HasId { id: string; }
interface HasName { name: string; }
interface HasEmail { email: string; }
interface HasPhone { phone: string; }
interface HasAddress { address: string; }
interface HasAge { age: number; }
interface HasGender { gender: string; }
// This gets overwhelming!

class User implements HasId, HasName, HasEmail, HasPhone, HasAddress, HasAge, HasGender {
  // Too many interfaces to implement!
}

// ✅ Better - group related properties
interface Identifiable {
  id: string;
  uuid?: string;
}

interface PersonalInfo {
  name: string;
  age: number;
  gender?: string;
}

interface ContactInfo {
  email: string;
  phone?: string;
  address?: string;
}

class User implements Identifiable, PersonalInfo, ContactInfo {
  id: string;
  name: string;
  age: number;
  gender?: string;
  email: string;
  phone?: string;
  address?: string;
  
  constructor(id: string, name: string, age: number, email: string) {
    this.id = id;
    this.name = name;
    this.age = age;
    this.email = email;
  }
}

🤯 Pitfall 2: Breaking Interface Segregation

// ❌ Wrong - fat interface
interface Worker {
  work(): void;
  eat(): void;
  sleep(): void;
  getPaid(): void;
  takeVacation(): void;
  attendMeeting(): void;
  writeCode(): void;
  designUI(): void;
  testSoftware(): void;
}

// Not all workers do all these things!
class Developer implements Worker {
  work() { }
  eat() { }
  sleep() { }
  getPaid() { }
  takeVacation() { }
  attendMeeting() { }
  writeCode() { }
  designUI() { throw new Error("I'm not a designer!"); }
  testSoftware() { }
}

// ✅ Better - segregated interfaces
interface Employee {
  work(): void;
  getPaid(): void;
  takeVacation(): void;
}

interface Human {
  eat(): void;
  sleep(): void;
}

interface Programmer {
  writeCode(): void;
  debug(): void;
}

interface Designer {
  designUI(): void;
  createMockups(): void;
}

interface Tester {
  testSoftware(): void;
  reportBugs(): void;
}

// Now classes implement only what they need
class FullStackDeveloper implements Employee, Human, Programmer, Designer, Tester {
  work() { console.log('Working on full-stack tasks'); }
  getPaid() { console.log('💰 Paycheck received!'); }
  takeVacation() { console.log('🏖️ On vacation!'); }
  eat() { console.log('🍕 Eating pizza'); }
  sleep() { console.log('😴 Sleeping'); }
  writeCode() { console.log('⌨️ Writing code'); }
  debug() { console.log('🐛 Debugging'); }
  designUI() { console.log('🎨 Designing UI'); }
  createMockups() { console.log('📐 Creating mockups'); }
  testSoftware() { console.log('🧪 Testing software'); }
  reportBugs() { console.log('📝 Reporting bugs'); }
}

class BackendDeveloper implements Employee, Human, Programmer {
  work() { console.log('Working on backend'); }
  getPaid() { console.log('💰 Paycheck received!'); }
  takeVacation() { console.log('🏖️ On vacation!'); }
  eat() { console.log('☕ Drinking coffee'); }
  sleep() { console.log('😴 Power napping'); }
  writeCode() { console.log('⌨️ Writing server code'); }
  debug() { console.log('🐛 Debugging APIs'); }
}