Welcome! Having learned about various design patterns, you're well on your way to mastering structural design patterns using TypeScript. In this lesson, we'll explore the Decorator Pattern, an important structural pattern that allows us to add new functionalities to objects dynamically and transparently. This is particularly useful when you want to enhance the behavior of objects without modifying their core code.

The Decorator Pattern enables you to wrap an object with additional behavior in a flexible and reusable way. You'll learn how to use this pattern to extend the functionality of objects in a clean and maintainable manner. For example, let's consider a simple coffee ordering system. By the end of this lesson, you will be able to create a basic Coffee class and implement decorators like MilkDecorator and SugarDecorator to add features to the basic coffee object.

To understand the Decorator Pattern, let's think about a coffee shop where you can customize your coffee with various add-ons.

Consider a scenario in a coffee shop where you start with a simple cup of coffee and then enhance it with additional ingredients like milk, sugar, or whipped cream.

• Simple Coffee (Core Component): The basic coffee serves as the core component. It has fundamental properties, such as description and cost.
• Milk (Decorator): Adding milk to the coffee decorates it with additional features like an extra description ("Milk") and additional cost.
• Sugar (Decorator): Similarly, adding sugar will decorate the coffee with a sugar description and added cost.
• Multiple Decorations: You can layer decorators. For instance, you can first add milk and then add sugar to the already milk-decorated coffee. Each decorator wraps the core component or another decorator, enhancing its behavior.

In this structure, each decorator extends the functionality of the original component dynamically. You start with a basic coffee and, by wrapping it with different decorators, you can create complex coffee orders. For example, if you have a simple coffee object and want to create a coffee with milk and sugar, you don't need to create a new class for every combination of coffee. Instead, you can layer existing decorators:

This allows you to dynamically add or remove functionality to objects without altering their structure, leading to more modular and maintainable code.

We start by defining an abstract Coffee class. TypeScript provides built-in support for abstract classes and methods, allowing us to enforce that subclasses implement certain methods. We'll use type annotations to specify return types for our methods.

Here, Coffee is an abstract class with two abstract methods: getDescription and cost. The SimpleCoffee class provides concrete implementations of these methods.

Next, we create a CoffeeDecorator class that extends Coffee. It takes an instance of Coffee as a constructor parameter and delegates calls to getDescription and cost to the wrapped instance. TypeScript's type system allows us to specify the type of the decorated coffee and ensures type safety throughout.

Note: In TypeScript, abstract classes cannot be instantiated directly. The above instantiation of CoffeeDecorator is for illustration; in practice, you will use concrete subclasses of CoffeeDecorator.

Now, we extend CoffeeDecorator to create a MilkDecorator class. It overrides the getDescription and cost methods to add the description and cost of milk to the original coffee. TypeScript's type annotations ensure that the methods return the correct types.

Similarly, we create a SugarDecorator class by extending CoffeeDecorator. This decorator adds a sugar-related description and cost, using TypeScript's type annotations for clarity and safety.

Here is the complete code combining all the sections, written in TypeScript using abstract classes and type annotations:

Mastering the Decorator Pattern is important because it allows you to extend the functionality of objects at runtime without altering their structure. This leads to more flexible and maintainable code compared to using subclassing for every new feature. In our coffee example, you can easily add new features like milk and sugar by layering decorators, which can be combined in various ways. Whether you need to add functionality to user interface components, logging systems, or graphical rendering engines, the Decorator Pattern provides a powerful and elegant solution. Ready to see how this unfolds? Let's get started with the practice section, where you'll implement and extend the Decorator Pattern step by step.