Code Samples and Exercises for Mastering JavaScript and TypeScript Design Patterns

Appendix D: Code Samples and Exercises

Design patterns are a powerful tool in a developer’s toolkit, providing proven solutions to common problems in software design. This appendix serves as a practical guide to implementing these patterns in JavaScript and TypeScript, offering a wealth of code samples and exercises designed to reinforce the concepts discussed throughout the book. By engaging with these examples, you’ll gain a deeper understanding of how to apply design patterns effectively in your projects.

Setting Up Your Development Environment

Before diving into the code samples and exercises, it’s crucial to set up a robust development environment. This ensures that you can run and modify the examples seamlessly. Here’s a step-by-step guide to getting started:

1. Install Node.js and npm: Ensure you have the latest version of Node.js and npm installed. These tools are essential for running JavaScript and TypeScript code.

   # Check if Node.js is installed
   node -v
   
   # Check if npm is installed
   npm -v
   

2. Set Up TypeScript: If you plan to work with TypeScript, install it globally using npm.

   npm install -g typescript
   

3. Choose an IDE: Use a modern Integrated Development Environment (IDE) like Visual Studio Code, which offers excellent support for JavaScript and TypeScript.

4. Install Required Extensions: For Visual Studio Code, consider installing extensions such as ESLint, Prettier, and TypeScript Hero to enhance your coding experience.

5. Initialize a Project: Create a new directory for your exercises and initialize it with npm.

   mkdir design-patterns-exercises
   cd design-patterns-exercises
   npm init -y
   

6. Configure TypeScript: If you’re using TypeScript, generate a tsconfig.json file to configure the TypeScript compiler.

   tsc --init
   

7. Version Control: Use Git for version control to track changes and collaborate with others.

Code Samples by Chapter

The following sections provide code samples organized by chapter and design pattern. Each sample is accompanied by detailed explanations and comments to guide you through the implementation.

Chapter 2: Creational Design Patterns

Singleton Pattern

The Singleton Pattern ensures a class has only one instance and provides a global point of access to it. Here’s a simple implementation in TypeScript:

class Singleton {
  private static instance: Singleton;

  private constructor() {
    // Private constructor to prevent instantiation
  }

  public static getInstance(): Singleton {
    if (!Singleton.instance) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }

  public someMethod(): void {
    console.log("Singleton method called");
  }
}

// Usage
const singleton = Singleton.getInstance();
singleton.someMethod();

Exercise: Modify the Singleton pattern to include a counter that tracks how many times the getInstance method is called.

Solution: Update the getInstance method to increment a counter each time it is accessed.

Factory Pattern

The Factory Pattern provides a way to create objects without specifying the exact class of object that will be created. Here’s an implementation in JavaScript:

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  drive() {
    console.log(`Driving a ${this.make} ${this.model}`);
  }
}

class CarFactory {
  createCar(make, model) {
    return new Car(make, model);
  }
}

// Usage
const factory = new CarFactory();
const car = factory.createCar('Toyota', 'Corolla');
car.drive();

Exercise: Extend the factory to create different types of vehicles, such as trucks and motorcycles.

Solution: Implement additional classes and modify the factory to handle different vehicle types.

Chapter 3: Structural Design Patterns

Adapter Pattern

The Adapter Pattern allows incompatible interfaces to work together. Here’s an example in TypeScript:

interface OldInterface {
  oldMethod(): void;
}

class OldImplementation implements OldInterface {
  oldMethod() {
    console.log("Old method implementation");
  }
}

interface NewInterface {
  newMethod(): void;
}

class Adapter implements NewInterface {
  private oldImplementation: OldImplementation;

  constructor(oldImplementation: OldImplementation) {
    this.oldImplementation = oldImplementation;
  }

  newMethod() {
    this.oldImplementation.oldMethod();
  }
}

// Usage
const oldImplementation = new OldImplementation();
const adapter = new Adapter(oldImplementation);
adapter.newMethod();

Exercise: Implement an adapter for a library that uses a different naming convention for its methods.

Solution: Create an adapter class that maps the library’s methods to the desired interface.

Decorator Pattern

The Decorator Pattern adds behavior to objects dynamically. Here’s a JavaScript example:

class Coffee {
  cost() {
    return 5;
  }
}

class MilkDecorator {
  constructor(coffee) {
    this.coffee = coffee;
  }

  cost() {
    return this.coffee.cost() + 1;
  }
}

// Usage
const coffee = new Coffee();
const milkCoffee = new MilkDecorator(coffee);
console.log(milkCoffee.cost()); // Outputs: 6

Exercise: Create additional decorators for sugar and whipped cream, and apply them to the coffee.

Solution: Implement new decorator classes and apply them in sequence.

Chapter 4: Behavioral Design Patterns

Observer Pattern

The Observer Pattern defines a one-to-many dependency between objects. Here’s a TypeScript implementation:

interface Observer {
  update(data: any): void;
}

class Subject {
  private observers: Observer[] = [];

  addObserver(observer: Observer) {
    this.observers.push(observer);
  }

  removeObserver(observer: Observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(data: any) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class ConcreteObserver implements Observer {
  update(data: any) {
    console.log("Observer received data:", data);
  }
}

// Usage
const subject = new Subject();
const observer = new ConcreteObserver();
subject.addObserver(observer);
subject.notify("Hello, Observers!");

Exercise: Implement a weather station that notifies observers about temperature changes.

Solution: Create a WeatherStation class and implement observers for different display units.

Strategy Pattern

The Strategy Pattern defines a family of algorithms and makes them interchangeable. Here’s a JavaScript example:

class StrategyA {
  execute() {
    console.log("Executing strategy A");
  }
}

class StrategyB {
  execute() {
    console.log("Executing strategy B");
  }
}

class Context {
  constructor(strategy) {
    this.strategy = strategy;
  }

  setStrategy(strategy) {
    this.strategy = strategy;
  }

  executeStrategy() {
    this.strategy.execute();
  }
}

// Usage
const context = new Context(new StrategyA());
context.executeStrategy();
context.setStrategy(new StrategyB());
context.executeStrategy();

Exercise: Implement a strategy pattern for different sorting algorithms.

Solution: Create strategy classes for bubble sort, quick sort, and merge sort.

Sample Projects

To provide a more comprehensive understanding of design patterns, this section includes sample projects that demonstrate how to apply multiple patterns in real-world scenarios.

Project 1: E-commerce Platform

This project simulates an e-commerce platform, incorporating various design patterns such as Singleton for configuration management, Factory for product creation, and Observer for event handling.

• Setup Instructions: Clone the repository and follow the README for setup.
• Patterns Used: Singleton, Factory, Observer, Decorator.
• Exercises: Extend the platform to include a new payment method using the Strategy pattern.

Project 2: Chat Application

A simple chat application demonstrating the use of the Proxy pattern for network communication, the Command pattern for message handling, and the Decorator pattern for message formatting.

• Setup Instructions: Follow the installation guide in the repository.
• Patterns Used: Proxy, Command, Decorator.
• Exercises: Implement a new feature for message encryption using the Decorator pattern.

Common Mistakes and How to Avoid Them

When working with design patterns, it’s easy to fall into common pitfalls. Here are some mistakes to watch out for, along with tips on how to avoid them:

• Overusing Patterns: Not every problem requires a design pattern. Use patterns judiciously and only when they provide a clear benefit.
• Ignoring Simplicity: Sometimes, a simple solution is better than a complex pattern. Always prioritize readability and maintainability.
• Misapplying Patterns: Ensure you understand the problem domain and choose the appropriate pattern. Misapplying a pattern can lead to confusion and increased complexity.
• Lack of Testing: Design patterns should be thoroughly tested. Use unit tests to verify that your implementations work as expected.

Debugging and Troubleshooting Tips

Debugging design pattern implementations can be challenging. Here are some tips to help you troubleshoot issues effectively:

• Use Logging: Add logging statements to track the flow of execution and identify where things go wrong.
• Break Down the Problem: Isolate the problematic part of the code and test it independently.
• Review Pattern Structure: Ensure your implementation adheres to the pattern’s structure and principles.
• Seek Feedback: Share your code with peers for review and feedback.

Encouragement for Hands-On Practice

The best way to master design patterns is through hands-on practice. Experiment with the code samples, modify them, and try implementing patterns in your projects. Share your solutions with the community and seek feedback to improve.

Additional Resources

For further exploration of design patterns in JavaScript and TypeScript, consider the following resources:

• Books: “Design Patterns: Elements of Reusable Object-Oriented Software” by Erich Gamma et al.
• Online Courses: Explore courses on platforms like Coursera and Udemy for in-depth learning.
• Documentation: Refer to the official JavaScript and TypeScript documentation for language-specific features.

Acknowledgments

This appendix was made possible thanks to contributions from the developer community. We encourage readers to share their solutions and improvements, fostering a collaborative learning environment.

Quiz Time!

By engaging with these code samples and exercises, you will enhance your understanding of design patterns and their practical applications in JavaScript and TypeScript. Happy coding!