📘 Template Method: Algorithm Steps

🎯 Introduction

Ever followed a recipe to cook your favorite dish? 🍳 You follow the same steps each time - prep ingredients, cook them, season to taste, and serve. But each dish has its own unique ingredients and cooking times! That’s exactly what the Template Method pattern is all about - defining a recipe (algorithm) with fixed steps, but letting each dish (subclass) decide how to execute those steps! 🎨

In this tutorial, we’ll master the Template Method pattern in TypeScript and see how it helps us create flexible, reusable algorithms. Get ready to become a master chef of code! 👨‍🍳

📚 Understanding Template Method Pattern

The Template Method pattern is like creating a blueprint for an algorithm where:

• 📋 The skeleton stays the same - The main steps are defined in a base class
• 🎨 The details can vary - Subclasses implement specific behaviors
• 🔒 The order is protected - The algorithm structure can’t be changed
• 🎯 Consistency is guaranteed - All variations follow the same flow

Think of it as a dance routine 💃 - everyone follows the same sequence of moves, but each dancer adds their own style!

🔧 Basic Syntax and Usage

Let’s start with a simple Template Method pattern:

// 🎭 Abstract base class defining the template
abstract class GameLevel {
  // 🎮 Template method - defines the algorithm
  play(): void {
    this.start();      // 👋 Step 1
    this.spawn();      // 🎯 Step 2
    this.gameplay();   // 🎮 Step 3
    this.finish();     // 🏁 Step 4
  }

  // 🔧 Common implementation
  protected start(): void {
    console.log("🎬 Level starting...");
  }

  // 🎨 Abstract methods - must be implemented
  protected abstract spawn(): void;
  protected abstract gameplay(): void;
  
  // 🔧 Hook method - can be overridden
  protected finish(): void {
    console.log("🏁 Level complete!");
  }
}

// 🏰 Concrete implementation
class CastleLevel extends GameLevel {
  protected spawn(): void {
    console.log("🏰 Spawning knights and dragons!");
  }

  protected gameplay(): void {
    console.log("⚔️ Battle in the castle!");
  }
}

// 🚀 Another concrete implementation
class SpaceLevel extends GameLevel {
  protected spawn(): void {
    console.log("🚀 Spawning aliens and spaceships!");
  }

  protected gameplay(): void {
    console.log("👽 Battle in space!");
  }

  // 🎨 Override the hook method
  protected finish(): void {
    console.log("🌟 Mission accomplished! Return to Earth!");
  }
}

// 🎮 Let's play!
const castle = new CastleLevel();
castle.play();
// Output:
// 🎬 Level starting...
// 🏰 Spawning knights and dragons!
// ⚔️ Battle in the castle!
// 🏁 Level complete!

const space = new SpaceLevel();
space.play();
// Output:
// 🎬 Level starting...
// 🚀 Spawning aliens and spaceships!
// 👽 Battle in space!
// 🌟 Mission accomplished! Return to Earth!

💡 Practical Examples

Example 1: Coffee Shop Brewing System ☕

Let’s create a beverage brewing system where different drinks follow similar preparation steps:

// ☕ Abstract beverage class
abstract class Beverage {
  // 🎯 Template method for brewing
  brew(): void {
    this.boilWater();
    this.brewIngredients();
    this.pourInCup();
    if (this.wantsCondiments()) {  // 🔄 Hook for customization
      this.addCondiments();
    }
    this.serve();
  }

  // 🔥 Common steps
  private boilWater(): void {
    console.log("💧 Boiling water to perfect temperature...");
  }

  private pourInCup(): void {
    console.log("🥤 Pouring into cup...");
  }

  // 🎨 Abstract methods
  protected abstract brewIngredients(): void;
  protected abstract addCondiments(): void;
  protected abstract serve(): void;

  // 🪝 Hook method - can be overridden
  protected wantsCondiments(): boolean {
    return true;
  }
}

// ☕ Coffee implementation
class Coffee extends Beverage {
  private withMilk: boolean = true;

  constructor(withMilk: boolean = true) {
    super();
    this.withMilk = withMilk;
  }

  protected brewIngredients(): void {
    console.log("☕ Brewing rich coffee grounds...");
  }

  protected addCondiments(): void {
    console.log("🥛 Adding creamy milk and sugar...");
  }

  protected serve(): void {
    console.log("☕ Your coffee is ready! Enjoy! ☕");
  }

  protected wantsCondiments(): boolean {
    return this.withMilk;
  }
}

// 🍵 Tea implementation
class Tea extends Beverage {
  protected brewIngredients(): void {
    console.log("🍵 Steeping delicate tea leaves...");
  }

  protected addCondiments(): void {
    console.log("🍋 Adding fresh lemon slice...");
  }

  protected serve(): void {
    console.log("🍵 Your tea is ready! Relax and enjoy! 🌸");
  }
}

// 🥤 Hot chocolate implementation
class HotChocolate extends Beverage {
  protected brewIngredients(): void {
    console.log("🍫 Melting rich chocolate...");
  }

  protected addCondiments(): void {
    console.log("🍥 Adding fluffy marshmallows...");
  }

  protected serve(): void {
    console.log("🍫 Your hot chocolate is ready! So cozy! ❄️");
  }
}

// ☕ Let's brew some drinks!
console.log("=== Coffee Shop Orders ===");

const latte = new Coffee();
latte.brew();
console.log();

const blackCoffee = new Coffee(false);
blackCoffee.brew();
console.log();

const tea = new Tea();
tea.brew();

Example 2: Data Processing Pipeline 📊

Create a flexible data processing system:

// 📊 Abstract data processor
abstract class DataProcessor<T> {
  // 🎯 Template method for processing
  process(data: T[]): void {
    const validated = this.validate(data);
    const transformed = this.transform(validated);
    const analyzed = this.analyze(transformed);
    this.export(analyzed);
    this.notifyComplete();
  }

  // 🔍 Validation step
  protected validate(data: T[]): T[] {
    console.log("✅ Validating data...");
    return data.filter(item => this.isValid(item));
  }

  // 🎨 Abstract methods
  protected abstract isValid(item: T): boolean;
  protected abstract transform(data: T[]): T[];
  protected abstract analyze(data: T[]): any;
  protected abstract export(results: any): void;

  // 📢 Hook for notifications
  protected notifyComplete(): void {
    console.log("✨ Processing complete!");
  }
}

// 💰 Sales data processor
interface SalesData {
  id: number;
  amount: number;
  date: string;
  product: string;
}

class SalesProcessor extends DataProcessor<SalesData> {
  protected isValid(item: SalesData): boolean {
    return item.amount > 0 && item.product.length > 0;
  }

  protected transform(data: SalesData[]): SalesData[] {
    console.log("🔄 Transforming sales data...");
    return data.map(sale => ({
      ...sale,
      amount: Math.round(sale.amount * 100) / 100  // 💰 Round to cents
    }));
  }

  protected analyze(data: SalesData[]): any {
    console.log("📈 Analyzing sales trends...");
    const total = data.reduce((sum, sale) => sum + sale.amount, 0);
    const average = total / data.length;
    
    return {
      totalSales: total,
      averageSale: average,
      topProduct: this.findTopProduct(data),
      salesCount: data.length
    };
  }

  private findTopProduct(data: SalesData[]): string {
    const productSales = new Map<string, number>();
    
    data.forEach(sale => {
      const current = productSales.get(sale.product) || 0;
      productSales.set(sale.product, current + sale.amount);
    });

    let topProduct = "";
    let maxSales = 0;
    
    productSales.forEach((sales, product) => {
      if (sales > maxSales) {
        maxSales = sales;
        topProduct = product;
      }
    });
    
    return topProduct;
  }

  protected export(results: any): void {
    console.log("📤 Exporting sales report...");
    console.log(`💰 Total Sales: $${results.totalSales.toFixed(2)}`);
    console.log(`📊 Average Sale: $${results.averageSale.toFixed(2)}`);
    console.log(`🏆 Top Product: ${results.topProduct}`);
    console.log(`📈 Total Transactions: ${results.salesCount}`);
  }

  protected notifyComplete(): void {
    console.log("🎉 Sales report ready! Check your dashboard!");
  }
}

// 🎮 Usage
const salesData: SalesData[] = [
  { id: 1, amount: 99.99, date: "2024-01-01", product: "Gaming Mouse" },
  { id: 2, amount: 149.99, date: "2024-01-02", product: "Mechanical Keyboard" },
  { id: 3, amount: -10, date: "2024-01-03", product: "Invalid" },  // ❌ Will be filtered
  { id: 4, amount: 99.99, date: "2024-01-04", product: "Gaming Mouse" },
  { id: 5, amount: 279.99, date: "2024-01-05", product: "Gaming Monitor" }
];

const processor = new SalesProcessor();
processor.process(salesData);

Example 3: Game Character Creation 🎮

Build a character creation system with consistent steps:

// 🎮 Character creation template
abstract class CharacterCreator {
  // 🎯 Template method for character creation
  createCharacter(name: string): void {
    console.log(`🎨 Creating ${name}...`);
    this.selectClass();
    this.assignBaseStats();
    this.addSpecialAbilities();
    
    if (this.wantsCustomization()) {
      this.customizeAppearance();
    }
    
    this.finalizeCharacter(name);
  }

  // 🎭 Abstract methods
  protected abstract selectClass(): void;
  protected abstract assignBaseStats(): void;
  protected abstract addSpecialAbilities(): void;
  protected abstract customizeAppearance(): void;

  // 🪝 Hook methods
  protected wantsCustomization(): boolean {
    return true;
  }

  protected finalizeCharacter(name: string): void {
    console.log(`✨ ${name} is ready for adventure!`);
  }
}

// ⚔️ Warrior creator
class WarriorCreator extends CharacterCreator {
  protected selectClass(): void {
    console.log("⚔️ Class: Mighty Warrior");
  }

  protected assignBaseStats(): void {
    console.log("💪 Stats: High Strength, High Defense");
  }

  protected addSpecialAbilities(): void {
    console.log("🛡️ Abilities: Shield Bash, Berserker Rage");
  }

  protected customizeAppearance(): void {
    console.log("🎨 Appearance: Heavy armor, battle scars");
  }
}

// 🧙‍♂️ Wizard creator
class WizardCreator extends CharacterCreator {
  protected selectClass(): void {
    console.log("🧙‍♂️ Class: Wise Wizard");
  }

  protected assignBaseStats(): void {
    console.log("🧠 Stats: High Intelligence, High Mana");
  }

  protected addSpecialAbilities(): void {
    console.log("✨ Abilities: Fireball, Teleport");
  }

  protected customizeAppearance(): void {
    console.log("🎨 Appearance: Flowing robes, magical staff");
  }
}

// 🏹 Quick ranger (no customization)
class QuickRangerCreator extends CharacterCreator {
  protected selectClass(): void {
    console.log("🏹 Class: Swift Ranger");
  }

  protected assignBaseStats(): void {
    console.log("🎯 Stats: High Agility, High Perception");
  }

  protected addSpecialAbilities(): void {
    console.log("🦅 Abilities: Eagle Eye, Multi-shot");
  }

  protected customizeAppearance(): void {
    // 🚫 Not called due to hook
  }

  protected wantsCustomization(): boolean {
    return false;  // 🏃‍♂️ Skip customization for quick creation
  }
}

// 🎮 Create some characters!
console.log("=== Character Creation ===\n");

const warriorCreator = new WarriorCreator();
warriorCreator.createCharacter("Thorin");
console.log();

const wizardCreator = new WizardCreator();
wizardCreator.createCharacter("Gandalf");
console.log();

const rangerCreator = new QuickRangerCreator();
rangerCreator.createCharacter("Legolas");

🚀 Advanced Concepts

Advanced Template Method with Hooks and Guards 🔐

// 🏗️ Advanced template with multiple hooks
abstract class BuildProcess {
  private errors: string[] = [];

  // 🎯 Main template method
  build(): boolean {
    try {
      if (!this.shouldBuild()) {
        console.log("🚫 Build skipped");
        return false;
      }

      this.preBuild();
      
      if (!this.validate()) {
        this.handleValidationError();
        return false;
      }

      this.compile();
      
      if (this.needsOptimization()) {
        this.optimize();
      }

      this.package();
      
      if (this.shouldRunTests()) {
        const testsPassed = this.runTests();
        if (!testsPassed) {
          this.handleTestFailure();
          return false;
        }
      }

      this.deploy();
      this.postBuild();
      
      return true;
    } catch (error) {
      this.handleBuildError(error);
      return false;
    }
  }

  // 🪝 Hook methods with defaults
  protected shouldBuild(): boolean {
    return true;
  }

  protected preBuild(): void {
    console.log("🔧 Preparing build environment...");
  }

  protected needsOptimization(): boolean {
    return true;
  }

  protected shouldRunTests(): boolean {
    return true;
  }

  protected postBuild(): void {
    console.log("✅ Build completed successfully!");
  }

  // 🎨 Abstract methods
  protected abstract validate(): boolean;
  protected abstract compile(): void;
  protected abstract optimize(): void;
  protected abstract package(): void;
  protected abstract runTests(): boolean;
  protected abstract deploy(): void;

  // 🚨 Error handling hooks
  protected handleValidationError(): void {
    console.error("❌ Validation failed!");
  }

  protected handleTestFailure(): void {
    console.error("❌ Tests failed!");
  }

  protected handleBuildError(error: any): void {
    console.error("💥 Build error:", error.message);
  }
}

// 🌐 Web app builder
class WebAppBuilder extends BuildProcess {
  private production: boolean;

  constructor(production: boolean = false) {
    super();
    this.production = production;
  }

  protected validate(): boolean {
    console.log("🔍 Validating dependencies...");
    return true;  // 🎯 Simplified for demo
  }

  protected compile(): void {
    console.log("📦 Bundling JavaScript and CSS...");
  }

  protected optimize(): void {
    console.log("⚡ Minifying and tree-shaking...");
  }

  protected package(): void {
    console.log("📤 Creating deployment package...");
  }

  protected runTests(): boolean {
    console.log("🧪 Running unit and integration tests...");
    return true;  // ✅ All tests pass
  }

  protected deploy(): void {
    const target = this.production ? "production" : "staging";
    console.log(`🚀 Deploying to ${target}...`);
  }

  protected needsOptimization(): boolean {
    return this.production;  // 🎯 Only optimize for production
  }
}

// 📱 Mobile app builder
class MobileAppBuilder extends BuildProcess {
  private platform: "iOS" | "Android";

  constructor(platform: "iOS" | "Android") {
    super();
    this.platform = platform;
  }

  protected validate(): boolean {
    console.log(`🔍 Validating ${this.platform} SDK...`);
    return true;
  }

  protected compile(): void {
    console.log(`📱 Compiling ${this.platform} app...`);
  }

  protected optimize(): void {
    console.log("🗜️ Optimizing app size...");
  }

  protected package(): void {
    const packageType = this.platform === "iOS" ? "IPA" : "APK";
    console.log(`📦 Creating ${packageType} package...`);
  }

  protected runTests(): boolean {
    console.log("🧪 Running UI tests on simulator...");
    return true;
  }

  protected deploy(): void {
    const store = this.platform === "iOS" ? "App Store" : "Play Store";
    console.log(`📲 Uploading to ${store}...`);
  }
}

// 🏗️ Let's build!
console.log("=== Web App Build ===");
const webBuilder = new WebAppBuilder(true);
webBuilder.build();

console.log("\n=== Mobile App Build ===");
const mobileBuilder = new MobileAppBuilder("iOS");
mobileBuilder.build();

⚠️ Common Pitfalls and Solutions

❌ Wrong: Exposing the template method steps

// ❌ Bad: Steps are public and can be called individually
class BadRecipe {
  public prepareIngredients(): void {
    console.log("Preparing...");
  }

  public cook(): void {
    console.log("Cooking...");
  }

  public serve(): void {
    console.log("Serving...");
  }
}

// 😱 Can call steps out of order!
const recipe = new BadRecipe();
recipe.serve();  // ❌ Serving before cooking!
recipe.cook();

✅ Correct: Encapsulated template method

// ✅ Good: Template method controls the flow
abstract class GoodRecipe {
  // 🎯 Public template method
  cook(): void {
    this.prepareIngredients();
    this.cookFood();
    this.serve();
  }

  // 🔒 Protected steps - can't be called directly
  protected abstract prepareIngredients(): void;
  protected abstract cookFood(): void;
  protected abstract serve(): void;
}

class PastaRecipe extends GoodRecipe {
  protected prepareIngredients(): void {
    console.log("🍝 Boiling water and preparing pasta...");
  }

  protected cookFood(): void {
    console.log("🔥 Cooking pasta al dente...");
  }

  protected serve(): void {
    console.log("🍽️ Serving with fresh basil!");
  }
}

// ✅ Can only use the template method
const pasta = new PastaRecipe();
pasta.cook();  // ✅ Follows the correct order

❌ Wrong: Forcing implementation of optional steps

// ❌ Bad: Forces all subclasses to implement everything
abstract class BadWorkflow {
  abstract initialize(): void;
  abstract validate(): void;
  abstract process(): void;
  abstract cleanup(): void;  // ❌ Not always needed!
  abstract notify(): void;   // ❌ Not always needed!
}

✅ Correct: Using hooks for optional steps

// ✅ Good: Hooks provide flexibility
abstract class GoodWorkflow {
  execute(): void {
    this.initialize();
    
    if (this.shouldValidate()) {
      this.validate();
    }
    
    this.process();
    
    if (this.needsCleanup()) {
      this.cleanup();
    }
    
    if (this.shouldNotify()) {
      this.notify();
    }
  }

  // 🎯 Required steps
  protected abstract initialize(): void;
  protected abstract process(): void;

  // 🪝 Optional steps with hooks
  protected shouldValidate(): boolean { return true; }
  protected validate(): void {
    console.log("✅ Validating...");
  }

  protected needsCleanup(): boolean { return false; }
  protected cleanup(): void {
    console.log("🧹 Cleaning up...");
  }

  protected shouldNotify(): boolean { return false; }
  protected notify(): void {
    console.log("📧 Sending notification...");
  }
}

🛠️ Best Practices

1. 🎯 Keep the template method final

abstract class SecureTemplate {
  // 🔒 Use 'final' behavior - don't override in subclasses
  cook(): void {  // Don't make this abstract or virtual
    this.step1();
    this.step2();
    this.step3();
  }

  protected abstract step1(): void;
  protected abstract step2(): void;
  protected abstract step3(): void;
}

2. 🪝 Use hooks for optional behavior

abstract class FlexibleTemplate {
  process(): void {
    this.required();
    
    if (this.wantsOptionalStep()) {  // 🪝 Hook
      this.optional();
    }
  }

  protected abstract required(): void;
  
  // 🎯 Hook with default
  protected wantsOptionalStep(): boolean {
    return true;
  }
  
  protected optional(): void {
    console.log("📌 Default optional behavior");
  }
}

3. 📊 Use meaningful method names

// ✅ Good: Clear, descriptive names
abstract class DataPipeline {
  process(): void {
    this.extractDataFromSource();
    this.transformToTargetFormat();
    this.loadIntoDestination();
  }

  protected abstract extractDataFromSource(): void;
  protected abstract transformToTargetFormat(): void;
  protected abstract loadIntoDestination(): void;
}

// ❌ Bad: Generic names
abstract class BadPipeline {
  process(): void {
    this.doStep1();  // ❓ What does this do?
    this.doStep2();  // ❓ Not clear!
    this.doStep3();  // ❓ Confusing!
  }
}

🧪 Hands-On Exercise

Create a social media post publisher that handles different platforms! 📱

// 💪 Your challenge: Implement a social media publisher!

abstract class SocialMediaPublisher {
  // TODO: Create a publish() template method that:
  // 1. Authenticates with the platform
  // 2. Formats the content
  // 3. Validates post requirements
  // 4. Posts the content
  // 5. Returns the post URL

  // TODO: Add abstract methods for platform-specific logic
  // TODO: Add hooks for optional features (hashtags, mentions, etc.)
}

// TODO: Implement these concrete publishers:
// 1. TwitterPublisher - 280 char limit, hashtags
// 2. InstagramPublisher - Requires image, hashtags
// 3. LinkedInPublisher - Professional formatting, no char limit

// Test your implementation:
const post = {
  text: "Check out TypeScript Template Method pattern!",
  image: "typescript-logo.png",
  hashtags: ["TypeScript", "DesignPatterns"]
};

// Should work with all publishers!

// 📱 Social Media Publisher Template
abstract class SocialMediaPublisher {
  // 🎯 Template method
  publish(content: PostContent): string {
    console.log(`📱 Publishing to ${this.getPlatformName()}...`);
    
    this.authenticate();
    const formatted = this.formatContent(content);
    
    if (!this.validateContent(formatted)) {
      throw new Error("❌ Content validation failed!");
    }
    
    const postId = this.postContent(formatted);
    
    if (this.supportsMentions() && content.mentions) {
      this.processMentions(content.mentions);
    }
    
    if (this.supportsHashtags() && content.hashtags) {
      this.processHashtags(content.hashtags);
    }
    
    const url = this.getPostUrl(postId);
    this.onPublishSuccess(url);
    
    return url;
  }

  // 🔧 Common implementations
  protected authenticate(): void {
    console.log("🔐 Authenticating with platform...");
  }

  protected onPublishSuccess(url: string): void {
    console.log(`✅ Published successfully: ${url}`);
  }

  // 🎨 Abstract methods
  protected abstract getPlatformName(): string;
  protected abstract formatContent(content: PostContent): FormattedPost;
  protected abstract validateContent(content: FormattedPost): boolean;
  protected abstract postContent(content: FormattedPost): string;
  protected abstract getPostUrl(postId: string): string;

  // 🪝 Hook methods
  protected supportsMentions(): boolean { return false; }
  protected supportsHashtags(): boolean { return false; }
  
  protected processMentions(mentions: string[]): void {}
  protected processHashtags(hashtags: string[]): void {}
}

// 📊 Data structures
interface PostContent {
  text: string;
  image?: string;
  mentions?: string[];
  hashtags?: string[];
}

interface FormattedPost {
  content: string;
  media?: string;
  metadata?: any;
}

// 🐦 Twitter Publisher
class TwitterPublisher extends SocialMediaPublisher {
  private readonly MAX_LENGTH = 280;

  protected getPlatformName(): string {
    return "Twitter";
  }

  protected formatContent(content: PostContent): FormattedPost {
    let text = content.text;
    
    // 🏷️ Add hashtags to text
    if (content.hashtags) {
      const hashtagText = content.hashtags.map(tag => `#${tag}`).join(" ");
      text = `${text} ${hashtagText}`;
    }
    
    // ✂️ Truncate if needed
    if (text.length > this.MAX_LENGTH) {
      text = text.substring(0, this.MAX_LENGTH - 3) + "...";
    }
    
    return {
      content: text,
      media: content.image
    };
  }

  protected validateContent(content: FormattedPost): boolean {
    if (content.content.length > this.MAX_LENGTH) {
      console.log("❌ Tweet too long!");
      return false;
    }
    return true;
  }

  protected postContent(content: FormattedPost): string {
    console.log("🐦 Tweeting:", content.content);
    if (content.media) {
      console.log("📷 With image:", content.media);
    }
    return "tweet_" + Date.now();
  }

  protected getPostUrl(postId: string): string {
    return `https://twitter.com/user/status/${postId}`;
  }

  protected supportsHashtags(): boolean { return true; }
  protected supportsMentions(): boolean { return true; }

  protected processMentions(mentions: string[]): void {
    console.log("👥 Processing mentions:", mentions.map(m => `@${m}`).join(", "));
  }
}

// 📸 Instagram Publisher
class InstagramPublisher extends SocialMediaPublisher {
  protected getPlatformName(): string {
    return "Instagram";
  }

  protected formatContent(content: PostContent): FormattedPost {
    if (!content.image) {
      throw new Error("❌ Instagram requires an image!");
    }

    let caption = content.text;
    
    // 🏷️ Add hashtags
    if (content.hashtags) {
      const tags = content.hashtags.map(tag => `#${tag}`).join(" ");
      caption = `${caption}\n\n${tags}`;
    }
    
    return {
      content: caption,
      media: content.image,
      metadata: { type: "photo" }
    };
  }

  protected validateContent(content: FormattedPost): boolean {
    if (!content.media) {
      console.log("❌ Instagram post must have an image!");
      return false;
    }
    
    if (content.content.length > 2200) {
      console.log("❌ Caption too long!");
      return false;
    }
    
    return true;
  }

  protected postContent(content: FormattedPost): string {
    console.log("📸 Posting to Instagram...");
    console.log("🖼️ Image:", content.media);
    console.log("💬 Caption:", content.content);
    return "ig_" + Date.now();
  }

  protected getPostUrl(postId: string): string {
    return `https://instagram.com/p/${postId}`;
  }

  protected supportsHashtags(): boolean { return true; }

  protected processHashtags(hashtags: string[]): void {
    console.log("🏷️ Adding hashtags for discovery:", hashtags.join(", "));
  }
}

// 💼 LinkedIn Publisher
class LinkedInPublisher extends SocialMediaPublisher {
  protected getPlatformName(): string {
    return "LinkedIn";
  }

  protected formatContent(content: PostContent): FormattedPost {
    // 💼 Professional formatting
    let professionalContent = content.text;
    
    // 📝 Add professional context
    if (content.hashtags) {
      const tags = content.hashtags.map(tag => `#${tag}`).join(" ");
      professionalContent = `${professionalContent}\n\n${tags}`;
    }
    
    return {
      content: professionalContent,
      media: content.image,
      metadata: { visibility: "public" }
    };
  }

  protected validateContent(content: FormattedPost): boolean {
    // 💼 LinkedIn has generous limits
    if (content.content.length > 3000) {
      console.log("❌ Post too long for LinkedIn!");
      return false;
    }
    return true;
  }

  protected postContent(content: FormattedPost): string {
    console.log("💼 Sharing on LinkedIn...");
    console.log("📄 Content:", content.content);
    if (content.media) {
      console.log("📎 Attachment:", content.media);
    }
    return "li_" + Date.now();
  }

  protected getPostUrl(postId: string): string {
    return `https://linkedin.com/feed/update/${postId}`;
  }

  protected supportsHashtags(): boolean { return true; }
  protected supportsMentions(): boolean { return true; }

  protected processMentions(mentions: string[]): void {
    console.log("🔔 Notifying connections:", mentions.join(", "));
  }
}

// 🎮 Test the implementation
const post: PostContent = {
  text: "Check out TypeScript Template Method pattern! 🚀",
  image: "typescript-logo.png",
  hashtags: ["TypeScript", "DesignPatterns", "Programming"],
  mentions: ["typescript", "developer"]
};

console.log("=== Publishing to All Platforms ===\n");

// 🐦 Twitter
const twitter = new TwitterPublisher();
try {
  const tweetUrl = twitter.publish(post);
  console.log(`🔗 Tweet URL: ${tweetUrl}\n`);
} catch (error) {
  console.error(error.message);
}

// 📸 Instagram
const instagram = new InstagramPublisher();
try {
  const igUrl = instagram.publish(post);
  console.log(`🔗 Instagram URL: ${igUrl}\n`);
} catch (error) {
  console.error(error.message);
}

// 💼 LinkedIn
const linkedin = new LinkedInPublisher();
try {
  const liUrl = linkedin.publish(post);
  console.log(`🔗 LinkedIn URL: ${liUrl}\n`);
} catch (error) {
  console.error(error.message);
}

🎓 Key Takeaways

1. 🎯 Template Method defines algorithm structure - The skeleton stays the same, details vary
2. 🔒 Encapsulation is key - Keep steps protected, expose only the template method
3. 🪝 Hooks provide flexibility - Optional steps make patterns adaptable
4. 🎨 Abstract methods enforce implementation - Subclasses must provide specifics
5. 📊 Great for consistent workflows - Perfect when steps are fixed but details vary

🤝 Next Steps

Congratulations! 🎉 You’ve mastered the Template Method pattern! You can now create flexible algorithms with fixed structures but variable implementations. This pattern is perfect for frameworks, data processing, and any scenario where you need consistent workflows with custom behavior!

Next up, try:

• 🎯 Combining Template Method with Factory pattern
• 🔧 Creating your own mini-framework
• 📚 Building a testing framework with template methods
• 🎮 Implementing game AI with different behaviors

Keep building those amazing patterns! You’re becoming a TypeScript design pattern master! 🚀✨