Design Patterns in TypeScript

In the previous section, we only talked about principles. We did not mention patterns. In this one we will work almost exclusively with them so introductions are in order.

• Describe design patterns in general

• Briefly explain each creational pattern that we are going to study

Sometimes we need to only have a single instance of a class.

• Describe singleton theoretically

• Implement a Singleton TypeScript class for keeping up stats

Following the single responsibility principle, our consumer classes shouldn’t be the ones responsible for knowing how to instantiate classes that we need.

• Describe the factory pattern in theory

• Create a GameCharacterFactory class

Although not a pattern itself, loose coupling is very important and understanding it is critical to anyone willing to learn design patterns.

• Describe loose coupling

• Show examples of how the extended use of interfaces helps with loosely coupled code

The object pool is a great pattern to avoid having to be constantly initializing our enemy classes every time we need them.

• Use the factory created in the previous video

• Extend it to work with an object pool

Not all TypeScript developers are familiar with Dependency Injection and since we are dedicating a whole section on it we better spend a video trying to explain the most interesting topics.

• Explain Dependency Injection thoroughly

• Show a very simplistic visual example

There’s great value in creating a custom IoC container. The viewer will get to understand the inner workings of Dependency Injection.

• Describe the vital operations that an IoC container needs to be doing

• Implement the registration method

• Implement the dependency resolution method

Decorators are an experimental TypeScript feature with strong chances of being included in next JavaScript versions as well. It also comes in handy with DI implementations.

• Introduce method decorators

• Introduce decorator factories

• Introduce class decorators

We can use decorators to enhance our DI container implementation.

• Create a “register” class decorator

• Replace all calls to the register method with the register class decorator

Creating a custom DI container is great for educational purposes for real world apps we shouldn’t use a container we built in an hour’s time.

• Introduce the InversifyJS container

• Register dependencies with InversifyJS

• Create classes that will have their dependencies resolved using InversifyJS

Sometimes we need to combine entities into mixins but only dynamically on runtime. Here’s where the decorator pattern comes in.

• Display an example of bad inheritance practice

• Create a decorator hierarchy of a computer system and its subsystems

• Demonstrate a test with a server computer being combined with two decorators

In cases where we need to connect different APIs we need a way to avoid having to rewrite all the code.

• Describe the issue with having to replace a CountriesRepository

• Introduce the new Countries Service

• Create an adapter and solve the problem

In cases where we need to connect different APIs we need a way to avoid having to rewrite all the code.

• Use the adapter to implement a new repository

• Test the new repository

We need to create a central class that will act as a bridge between our client application and a 3rd party library and service.

• Use a very comprehensive example of the MailChimp API

• Introduce a JSON Placeholder service

• Implement a facade

We need a way to create part-whole collections.

• Describe an example of decks of cards

• Create an ICardComponent interface

• Implement it in both the card class and the CardDeck class

Sometimes we are looking for a way to swap similar algorithms at run time

• Describe the problem

• Present the strategy pattern

• Implement a Strategy Pattern demo using an error handler example

Watching for property changes is vital especially in a world of applications with high demand for constant responsiveness

• Create a car class and watch its current speed property

• Create two observer functions and register them

• Inspect the console for property changes

The Command Pattern allows the encapsulation of a whole process. We need it if we are to run a process later in time or even undo it

• Introduce the concept of a worker process

• Delegate error logging to a worker process

The template method will help us create subclasses that implement parts of an already defined process

• Describe the problem of having multiple subscription plans in your SaaS application

• Solve the issue by creating a template base class

• Create two profile subclasses that implement the steps differently

Following a similar path like the previous video. We need a way to change subscription status. The state pattern is perfect for such a feat

• Define a state interface

• Define concrete states

• Define the context class and change states