📘 Adapter Pattern: Interface Compatibility

🎯 Introduction

Welcome to this exciting tutorial on the Adapter Pattern! 🎉 Have you ever tried to plug a European phone charger into an American outlet? You need an adapter! That’s exactly what we’ll learn to do with TypeScript code today.

You’ll discover how the Adapter Pattern can help you connect incompatible interfaces, making different parts of your code work together harmoniously. Whether you’re integrating third-party libraries 📚, working with legacy code 🏚️, or building flexible APIs 🌐, mastering the Adapter Pattern is essential for writing maintainable, scalable TypeScript applications.

By the end of this tutorial, you’ll be creating adapters like a pro! Let’s dive in! 🏊‍♂️

📚 Understanding the Adapter Pattern

🤔 What is the Adapter Pattern?

The Adapter Pattern is like a universal translator 🌍 for your code. Think of it as the friend who helps two people who speak different languages communicate with each other. It’s a bridge that allows classes with incompatible interfaces to work together!

In TypeScript terms, the Adapter Pattern creates a wrapper that translates one interface into another. This means you can:

• ✨ Use existing code without modification
• 🚀 Integrate third-party libraries seamlessly
• 🛡️ Maintain loose coupling between components

💡 Why Use the Adapter Pattern?

Here’s why developers love the Adapter Pattern:

1. Flexibility 🔌: Connect different systems without changing their code
2. Reusability ♻️: Use existing classes with new interfaces
3. Maintainability 🔧: Keep your code modular and easy to update
4. Integration 🤝: Work with external APIs and libraries smoothly

Real-world example: Imagine building a payment system 💳. You need to support PayPal, Stripe, and Square. Each has different APIs, but with adapters, your code can use them all through a single interface!

🔧 Basic Syntax and Usage

📝 Simple Example

Let’s start with a friendly example:

// 🎯 Target interface - what our app expects
interface MediaPlayer {
  play(filename: string): void;
  stop(): void;
}

// 📱 Existing class with different interface
class AdvancedMusicPlayer {
  playMusic(track: string): void {
    console.log(`🎵 Playing music: ${track}`);
  }
  
  halt(): void {
    console.log("⏹️ Music stopped");
  }
}

// 🔌 Adapter to make them work together!
class MusicPlayerAdapter implements MediaPlayer {
  private player: AdvancedMusicPlayer;
  
  constructor() {
    this.player = new AdvancedMusicPlayer();
  }
  
  play(filename: string): void {
    // 🎯 Adapt the method call
    this.player.playMusic(filename);
  }
  
  stop(): void {
    // 🔄 Translate to the expected method
    this.player.halt();
  }
}

// 🎮 Using the adapter
const player: MediaPlayer = new MusicPlayerAdapter();
player.play("awesome-song.mp3"); // Works perfectly! 🎉

💡 Explanation: The adapter wraps the AdvancedMusicPlayer and translates its methods to match the MediaPlayer interface. Magic! ✨

🎯 Common Patterns

Here are patterns you’ll use daily:

// 🏗️ Pattern 1: Class Adapter
class LegacyPrinter {
  printOldWay(text: string): void {
    console.log(`📜 Legacy print: ${text}`);
  }
}

interface ModernPrinter {
  print(content: string): void;
}

class PrinterAdapter extends LegacyPrinter implements ModernPrinter {
  print(content: string): void {
    this.printOldWay(content); // 🔄 Adapting the call
  }
}

// 🎨 Pattern 2: Object Adapter
class EmailService {
  sendEmail(to: string, subject: string, body: string): void {
    console.log(`📧 Sending email to ${to}`);
  }
}

interface NotificationService {
  notify(user: string, message: string): void;
}

class EmailNotificationAdapter implements NotificationService {
  constructor(private emailService: EmailService) {}
  
  notify(user: string, message: string): void {
    // 🎯 Adapt parameters to match expected interface
    this.emailService.sendEmail(user, "Notification", message);
  }
}

💡 Practical Examples

🛒 Example 1: Payment Gateway Adapter

Let’s build something real:

// 💳 Our app's payment interface
interface PaymentGateway {
  processPayment(amount: number, currency: string): Promise<boolean>;
  refund(transactionId: string): Promise<boolean>;
}

// 🏦 External payment provider with different API
class StripePaymentAPI {
  chargeCard(cents: number, currencyCode: string): Promise<{success: boolean, id: string}> {
    console.log(`💰 Stripe: Charging ${cents} cents in ${currencyCode}`);
    return Promise.resolve({ success: true, id: "stripe_123" });
  }
  
  issueRefund(chargeId: string): Promise<{refunded: boolean}> {
    console.log(`💸 Stripe: Refunding charge ${chargeId}`);
    return Promise.resolve({ refunded: true });
  }
}

// 🔌 Adapter to make Stripe work with our interface
class StripeAdapter implements PaymentGateway {
  private stripe: StripePaymentAPI;
  private lastTransactionId: string = "";
  
  constructor() {
    this.stripe = new StripePaymentAPI();
  }
  
  async processPayment(amount: number, currency: string): Promise<boolean> {
    // 💡 Convert dollars to cents for Stripe
    const cents = Math.round(amount * 100);
    const result = await this.stripe.chargeCard(cents, currency.toUpperCase());
    this.lastTransactionId = result.id;
    return result.success;
  }
  
  async refund(transactionId: string): Promise<boolean> {
    const result = await this.stripe.issueRefund(transactionId);
    return result.refunded;
  }
}

// 🎮 Using our adapter
const paymentGateway: PaymentGateway = new StripeAdapter();
await paymentGateway.processPayment(99.99, "usd"); // Works seamlessly! 🎉

🎯 Try it yourself: Create a PayPalAdapter that adapts a different payment API!

🎮 Example 2: Game Controller Adapter

Let’s make it fun:

// 🎮 Our game's expected controller interface
interface GameController {
  movePlayer(direction: "up" | "down" | "left" | "right"): void;
  jump(): void;
  attack(): void;
}

// 🕹️ Old-school joystick with different methods
class RetroJoystick {
  pushStick(angle: number): void {
    console.log(`🕹️ Joystick pushed at ${angle}°`);
  }
  
  pressButtonA(): void {
    console.log("🅰️ Button A pressed!");
  }
  
  pressButtonB(): void {
    console.log("🅱️ Button B pressed!");
  }
}

// 🔌 Adapter to use retro joystick in modern game
class JoystickAdapter implements GameController {
  private joystick: RetroJoystick;
  
  constructor() {
    this.joystick = new RetroJoystick();
  }
  
  movePlayer(direction: "up" | "down" | "left" | "right"): void {
    // 🎯 Convert direction to angle
    const angleMap = {
      up: 0,
      right: 90,
      down: 180,
      left: 270
    };
    this.joystick.pushStick(angleMap[direction]);
  }
  
  jump(): void {
    this.joystick.pressButtonA(); // 🦘 A button for jump!
  }
  
  attack(): void {
    this.joystick.pressButtonB(); // ⚔️ B button for attack!
  }
}

// 🏃‍♂️ Game logic using our adapter
class Game {
  constructor(private controller: GameController) {}
  
  playSequence(): void {
    console.log("🎮 Starting epic game sequence!");
    this.controller.movePlayer("right");
    this.controller.jump();
    this.controller.attack();
    console.log("🏆 Combo completed!");
  }
}

// 🎯 Play with any controller!
const retroController = new JoystickAdapter();
const game = new Game(retroController);
game.playSequence();

🚀 Advanced Concepts

🧙‍♂️ Advanced Topic 1: Two-Way Adapters

When you’re ready to level up, try this advanced pattern:

// 🎯 Bidirectional adapter for data transformation
interface ModernUser {
  fullName: string;
  email: string;
  isActive: boolean;
}

interface LegacyUser {
  firstName: string;
  lastName: string;
  emailAddress: string;
  status: "active" | "inactive";
}

class UserAdapter {
  // ✨ Modern to Legacy
  static toModern(legacy: LegacyUser): ModernUser {
    return {
      fullName: `${legacy.firstName} ${legacy.lastName}`,
      email: legacy.emailAddress,
      isActive: legacy.status === "active"
    };
  }
  
  // 🔄 Legacy to Modern
  static toLegacy(modern: ModernUser): LegacyUser {
    const [firstName, ...lastNameParts] = modern.fullName.split(" ");
    return {
      firstName,
      lastName: lastNameParts.join(" "),
      emailAddress: modern.email,
      status: modern.isActive ? "active" : "inactive"
    };
  }
}

// 🪄 Using the two-way adapter
const legacyData: LegacyUser = {
  firstName: "Sarah",
  lastName: "Johnson",
  emailAddress: "[email protected]",
  status: "active"
};

const modernUser = UserAdapter.toModern(legacyData);
console.log("✨ Modern format:", modernUser);

🏗️ Advanced Topic 2: Generic Adapters

For the brave developers:

// 🚀 Generic adapter factory
abstract class GenericAdapter<TSource, TTarget> {
  constructor(protected source: TSource) {}
  
  abstract adapt(): TTarget;
}

// 📊 Example: Data source adapters
interface ChartData {
  labels: string[];
  values: number[];
}

class CSVAdapter extends GenericAdapter<string[][], ChartData> {
  adapt(): ChartData {
    const labels = this.source.map(row => row[0]);
    const values = this.source.map(row => parseFloat(row[1]));
    return { labels, values };
  }
}

class JSONAdapter extends GenericAdapter<{name: string, count: number}[], ChartData> {
  adapt(): ChartData {
    const labels = this.source.map(item => item.name);
    const values = this.source.map(item => item.count);
    return { labels, values };
  }
}

// 📈 Using generic adapters
const csvData = [["Monday", "10"], ["Tuesday", "15"]];
const csvAdapter = new CSVAdapter(csvData);
const chartData = csvAdapter.adapt();
console.log("📊 Chart ready:", chartData);

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Forgetting to Handle All Methods

// ❌ Wrong way - incomplete adapter!
class BadAdapter implements MediaPlayer {
  play(filename: string): void {
    console.log("Playing...");
  }
  // 💥 Forgot to implement stop()! TypeScript will catch this!
}

// ✅ Correct way - implement all methods!
class GoodAdapter implements MediaPlayer {
  play(filename: string): void {
    console.log(`🎵 Playing: ${filename}`);
  }
  
  stop(): void {
    console.log("⏹️ Stopped"); // ✅ All methods implemented!
  }
}

🤯 Pitfall 2: Tight Coupling in Adapters

// ❌ Dangerous - adapter knows too much!
class TightlyCoupledAdapter {
  private api = new ExternalAPI();
  
  doSomething(): void {
    // 😰 Directly accessing internal properties
    this.api.internalState.privateMethod();
  }
}

// ✅ Safe - use only public interface!
class LooseCoupledAdapter {
  constructor(private api: ExternalAPI) {} // 💉 Dependency injection
  
  doSomething(): void {
    // ✅ Use only public methods
    this.api.publicMethod();
  }
}

🛠️ Best Practices

1. 🎯 Single Responsibility: Each adapter should adapt one interface only
2. 📝 Clear Naming: Use descriptive names like PayPalPaymentAdapter
3. 🛡️ Dependency Injection: Pass adaptees through constructor
4. 🎨 Keep It Simple: Don’t add extra functionality in adapters
5. ✨ Type Safety: Always implement interfaces completely

🧪 Hands-On Exercise

🎯 Challenge: Build a Social Media Adapter System

Create adapters for different social media platforms:

📋 Requirements:

• ✅ Common interface for posting to social media
• 🏷️ Support for Twitter, Facebook, and Instagram APIs
• 👤 Handle different post formats (text, images, videos)
• 📅 Schedule posts for later
• 🎨 Each platform has its own emoji style!

🚀 Bonus Points:

• Add character limit handling for Twitter
• Implement hashtag conversion
• Create a multi-platform poster

💡 Solution

// 🎯 Common social media interface
interface SocialMediaPlatform {
  post(content: string, media?: string[]): Promise<boolean>;
  schedule(content: string, datetime: Date): Promise<string>;
  getCharLimit(): number;
}

// 🐦 Twitter API (different interface)
class TwitterAPI {
  tweet(text: string, images: string[] = []): Promise<{id: string}> {
    console.log(`🐦 Tweeting: ${text.substring(0, 280)}`);
    return Promise.resolve({ id: "tweet_123" });
  }
  
  scheduleTweet(text: string, time: number): Promise<{scheduled_id: string}> {
    console.log(`⏰ Scheduled tweet for ${new Date(time)}`);
    return Promise.resolve({ scheduled_id: "scheduled_456" });
  }
}

// 📘 Facebook API (different interface)
class FacebookAPI {
  createPost(message: string, attachments?: {type: string, url: string}[]): Promise<boolean> {
    console.log(`📘 Facebook post: ${message}`);
    return Promise.resolve(true);
  }
  
  schedulePost(message: string, publishTime: string): Promise<boolean> {
    console.log(`📅 Scheduled for ${publishTime}`);
    return Promise.resolve(true);
  }
}

// 🐦 Twitter Adapter
class TwitterAdapter implements SocialMediaPlatform {
  private twitter = new TwitterAPI();
  
  async post(content: string, media?: string[]): Promise<boolean> {
    const result = await this.twitter.tweet(content, media || []);
    return !!result.id;
  }
  
  async schedule(content: string, datetime: Date): Promise<string> {
    const result = await this.twitter.scheduleTweet(content, datetime.getTime());
    return result.scheduled_id;
  }
  
  getCharLimit(): number {
    return 280; // 🐦 Twitter's character limit
  }
}

// 📘 Facebook Adapter
class FacebookAdapter implements SocialMediaPlatform {
  private facebook = new FacebookAPI();
  
  async post(content: string, media?: string[]): Promise<boolean> {
    const attachments = media?.map(url => ({ type: "image", url }));
    return await this.facebook.createPost(content, attachments);
  }
  
  async schedule(content: string, datetime: Date): Promise<string> {
    await this.facebook.schedulePost(content, datetime.toISOString());
    return `fb_scheduled_${Date.now()}`;
  }
  
  getCharLimit(): number {
    return 63206; // 📘 Facebook's generous limit
  }
}

// 🎯 Multi-platform poster
class SocialMediaManager {
  private platforms: Map<string, SocialMediaPlatform> = new Map();
  
  addPlatform(name: string, platform: SocialMediaPlatform): void {
    this.platforms.set(name, platform);
    console.log(`✅ Added ${name} platform`);
  }
  
  async postToAll(content: string): Promise<void> {
    console.log("📢 Posting to all platforms...");
    
    for (const [name, platform] of this.platforms) {
      const limit = platform.getCharLimit();
      const trimmedContent = content.substring(0, limit);
      
      try {
        await platform.post(trimmedContent);
        console.log(`✅ Posted to ${name}`);
      } catch (error) {
        console.log(`❌ Failed to post to ${name}`);
      }
    }
    
    console.log("🎉 Multi-platform post complete!");
  }
}

// 🎮 Test it out!
const manager = new SocialMediaManager();
manager.addPlatform("Twitter", new TwitterAdapter());
manager.addPlatform("Facebook", new FacebookAdapter());

await manager.postToAll("Check out the Adapter Pattern in TypeScript! It's amazing! 🚀 #coding #typescript");

🎓 Key Takeaways

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

• ✅ Create adapters to bridge incompatible interfaces 💪
• ✅ Integrate third-party libraries smoothly 🛡️
• ✅ Apply the pattern in real-world scenarios 🎯
• ✅ Avoid common adapter pitfalls like a pro 🐛
• ✅ Build flexible, maintainable systems with TypeScript! 🚀

Remember: The Adapter Pattern is your Swiss Army knife for making different parts of your code work together harmoniously! 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered the Adapter Pattern!

Here’s what to do next:

1. 💻 Practice with the social media exercise above
2. 🏗️ Build adapters for your current project’s integrations
3. 📚 Move on to our next tutorial: Abstract Factory Pattern
4. 🌟 Share your adapter implementations with the community!

Remember: Every time you successfully connect two incompatible interfaces, you’re making the coding world a better place. Keep adapting, keep learning, and most importantly, have fun! 🚀

Happy coding! 🎉🚀✨