Design Patterns in TypeScript

Creational Design Patterns | Structural Design Patterns | Behavioral Design Patterns

In software engineering, a software design pattern is a general reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code. It is a description or template for how to solve a problem that can be used in many different situations.

This article assumes you are reasonably proficient in at least one object-oriented programming language, and you should have some experience in object-oriented design as well. You definitely shouldn't have to rush to the nearest dictionary the moment we mention "types" and "polymorphism," or "interface" as opposed to "implementation / inheritance”.
But I'll try to keep the literature as simple as possible.

Don't worry if you don’t understand this article completely on the first reading. We didn’t understand it all on the first writing! Remember that this isn't an article to read once and forget it. We hope you'll find yourself referring to it again and again for design insights and for inspiration.

Object-Oriented Terminology

Term	Definition
Abstract class	Defines the methods and common attributes of a set of classes that are conceptually similar. Abstract classes are never instantiated.
Attribute	Data associated with an object (also called a data member).
Class	Blueprint of an object—defines the methods and data of an object of its type.
Constructor	Special method that is invoked when an object is created.
Encapsulation	Any kind of hiding. Objects encapsulate their data. Abstract classes encapsulate their derived concrete classes.
Derived class	A class that is specialized from a superclass. Contains all of the attributes and methods of the superclass but may also contain other attributes or dif-ferent method implementations.
Destructor	Special method that is invoked when an object is deleted.
Functional decomposition	A method of analysis in which a problem is broken into smaller and smaller functions.
Inheritance	The way that a class is specialized, used to relate derived classes from their abstractions.
Instance	A particular object of a class.
Instantiation	The process of creating an instance of a class.MemberEither data or method of a class.
Method	Functions that are associated with an object.
Object	An entity with responsibilities. A special, self-contained holder of both data and methods that operate on that data. An object’s data are protected from external objects.
Polymorphism	The ability of related objects to implement methods that are specialized to their type.
Superclass	A class from which other classes are derived. Contains the master definitions of attributes and methods that all derived classes will use (and possibly will override).

Creational Design Patterns

Creational Design Patterns are concerned with the way in which objects are created.

Creational design patterns abstract the instantiation process, meaning construction of objects is decoupled from their implementation logic.
They help make a system independent of how its objects are created,composed, and represented.
Encapsulate knowledge about which concreate classes the system uses.
Hide how instances of these classes are created and put together.

Note : A class creational pattern uses inheritance to vary the class that's instantiated, where as an object creational pattern will delegate instantiation to another object.

Creational Design patterns Table

Thumbnail	Design Pattern
	Factory Method The factory pattern takes out the responsibility of instantiating a object from the class to a Factory class. Creates an instance of several derived classes.
	Abstract Factory Allows us to create a Factory for factory classes. The abstract factory pattern provides a way to encapsulate a group of individual factories that have a common theme without specifying their concrete classes.
	Builder Creating an object step by step and a method to finally get the object instance. Allows you to create different flavors of an object while avoiding constructor pollution. Useful when there could be several flavors of an object. Or when there are a lot of steps involved in creation of an object.
	Prototype Create object based on an existing object through cloning. Creating a new object instance from another similar instance and then modify according to our requirements.
	Singleton In Ensures a class has only one instance and provide a global point of access to it. Singleton pattern is a software design pattern that restricts the instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system.
	Object Pool Design Pattern Object pools are used to manage the object caching. Avoid expensive acquisition and release of resources by recycling objects that are no longer in use.

<Br>

Structural design patterns

Structural patterns are mostly concerned with object composition or in other words how the entities can use each other. Or yet another explanation would be, they help in answering "How to build a software component?"

Structural patterns explain how to assemble objects and classes into larger structures while keeping these structures flexible and efficient.
A structural design pattern serves as a blueprint for how different classes and objects are combined to form larger structures. Unlike creational patterns, which are mostly different ways to fulfill the same fundamental purpose, each structural pattern has a different purpose.

Structural Design patterns Table

Thumbnail	Design Pattern
	Adapter Provides an interface between two unrelated entities so that they can work together.
	Composite Used when we have to implement a part-whole hierarchy. For example, a diagram made of other pieces such as circle, square, triangle, etc.
	Proxy Provide a surrogate or placeholder for another object to control access to it.
	Flyweight Caching and reusing object instances, used with immutable objects. For example, string pool.
	Facade Creating a wrapper interfaces on top of existing interfaces to help client applications.
	Bridge The bridge design pattern is used to decouple the interfaces from implementation and hiding the implementation details from the client program.
	Decorator The decorator design pattern is used to modify the functionality of an object at runtime.

<Br>

Behavioral Design Patterns

Behavioral design patterns are concerned with algorithms and the assignment of responsibilities between objects.

Behavioral Design Patterns identify common communication patterns between objects and realize these patterns. By doing so, these patterns increase flexibility in carrying out this communication.
What makes them different from structural patterns is they don't just specify the structure but also outline the patterns for message passing/communication between them. Or in other words, they assist in answering "How to run a behavior in software component?"

Behavioral Design patterns Table

Thumbnail	Design Pattern
	Template Method used to create a template method stub and defer some of the steps of implementation to the subclasses.
	Mediator used to provide a centralized communication medium between different objects in a system.
	Chain of Responsibility used to achieve loose coupling in software design where a request from the client is passed to a chain of objects to process them.
	Observer useful when you are interested in the state of an object and want to get notified whenever there is any change.
	Strategy Strategy pattern is used when we have multiple algorithm for a specific task and client decides the actual implementation to be used at runtime.
	Command Command Pattern is used to implement lose coupling in a request-response model.
	State State design pattern is used when an Object change it’s behavior based on it’s internal state.
	Visitor Visitor pattern is used when we have to perform an operation on a group of similar kind of Objects.
	Interpreter defines a grammatical representation for a language and provides an interpreter to deal with this grammar.
	Iterator used to provide a standard way to traverse through a group of Objects.
	Memento The memento design pattern is used when we want to save the state of an object so that we can restore later on.

Conclusion

Once you understand the design patterns and have had an "Aha!" (and not just a "Huh?") experience with them, you won't ever think about object-oriented design in the same way.

The intent of this Article is provide you with insights that can make your own designs more flexible, modular, reusable, and understandable.

Credits

Inspiration -> Ahmed Kamran

Design-Patterns-in-TypeScript Design-Patterns-in-TypeScript copied to clipboard

Metadata

Design Patterns in TypeScript

Object-Oriented Terminology

Term

Definition

Abstract class

Defines the methods and common attributes of a set of classes that are conceptually similar. Abstract classes are never instantiated.

Attribute

Data associated with an object (also called a data member).

Class

Blueprint of an object—defines the methods and data of an object of its type.

Constructor

Special method that is invoked when an object is created.

Encapsulation

Any kind of hiding. Objects encapsulate their data. Abstract classes encapsulate their derived concrete classes.

Derived class

A class that is specialized from a superclass. Contains all of the attributes and methods of the superclass but may also contain other attributes or dif-ferent method implementations.

Destructor

Special method that is invoked when an object is deleted.

Functional decomposition

A method of analysis in which a problem is broken into smaller and smaller functions.

Inheritance

The way that a class is specialized, used to relate derived classes from their abstractions.

Instance

A particular object of a class.

Instantiation

The process of creating an instance of a class.MemberEither data or method of a class.

Method

Functions that are associated with an object.

Object

An entity with responsibilities. A special, self-contained holder of both data and methods that operate on that data. An object’s data are protected from external objects.

Polymorphism

The ability of related objects to implement methods that are specialized to their type.

Superclass

A class from which other classes are derived. Contains the master definitions of attributes and methods that all derived classes will use (and possibly will override).

Creational Design Patterns Creational Design Patterns are concerned with the way in which objects are created.

The factory pattern takes out the responsibility of instantiating a object from the class to a Factory class.Creates an instance of several derived classes.

Allows us to create a Factory for factory classes.The abstract factory pattern provides a way to encapsulate a group of individual factories that have a common theme without specifying their concrete classes.

Creating an object step by step and a method to finally get the object instance.Allows you to create different flavors of an object while avoiding constructor pollution. Useful when there could be several flavors of an object. Or when there are a lot of steps involved in creation of an object.

Create object based on an existing object through cloning. Creating a new object instance from another similar instance and then modify according to our requirements.

In Ensures a class has only one instance and provide a global point of access to it.Singleton pattern is a software design pattern that restricts the instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system.

Object pools are used to manage the object caching.Avoid expensive acquisition and release of resources by recycling objects that are no longer in use.

Structural design patterns Structural patterns are mostly concerned with object composition or in other words how the entities can use each other. Or yet another explanation would be, they help in answering "How to build a software component?"

Provides an interface between two unrelated entities so that they can work together.

Used when we have to implement a part-whole hierarchy. For example, a diagram made of other pieces such as circle, square, triangle, etc.

Provide a surrogate or placeholder for another object to control access to it.

Caching and reusing object instances, used with immutable objects. For example, string pool.

Creating a wrapper interfaces on top of existing interfaces to help client applications.

The bridge design pattern is used to decouple the interfaces from implementation and hiding the implementation details from the client program.

The decorator design pattern is used to modify the functionality of an object at runtime.

Behavioral Design Patterns Behavioral design patterns are concerned with algorithms and the assignment of responsibilities between objects.

used to create a template method stub and defer some of the steps of implementation to the subclasses.

used to provide a centralized communication medium between different objects in a system.

used to achieve loose coupling in software design where a request from the client is passed to a chain of objects to process them.

useful when you are interested in the state of an object and want to get notified whenever there is any change.

Strategy pattern is used when we have multiple algorithm for a specific task and client decides the actual implementation to be used at runtime.

Command Pattern is used to implement lose coupling in a request-response model.

State design pattern is used when an Object change it’s behavior based on it’s internal state.

Visitor pattern is used when we have to perform an operation on a group of similar kind of Objects.

defines a grammatical representation for a language and provides an interpreter to deal with this grammar.

used to provide a standard way to traverse through a group of Objects.

The memento design pattern is used when we want to save the state of an object so that we can restore later on.

Conclusion

Credits

← Metadata

Owner

Metadata

Design-Patterns-in-TypeScript
Design-Patterns-in-TypeScript copied to clipboard

Creational Design Patterns

Creational Design Patterns are concerned with the way in which objects are created.

The factory pattern takes out the responsibility of instantiating a object from the class to a Factory class.
Creates an instance of several derived classes.

Allows us to create a Factory for factory classes.
The abstract factory pattern provides a way to encapsulate a group of individual factories that have a common theme without specifying their concrete classes.

Creating an object step by step and a method to finally get the object instance.
Allows you to create different flavors of an object while avoiding constructor pollution. Useful when there could be several flavors of an object. Or when there are a lot of steps involved in creation of an object.

Create object based on an existing object through cloning.
Creating a new object instance from another similar instance and then modify according to our requirements.

In Ensures a class has only one instance and provide a global point of access to it.
Singleton pattern is a software design pattern that restricts the instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system.

Object pools are used to manage the object caching.
Avoid expensive acquisition and release of resources by recycling objects that are no longer in use.

Structural design patterns

Structural patterns are mostly concerned with object composition or in other words how the entities can use each other. Or yet another explanation would be, they help in answering "How to build a software component?"

Behavioral Design Patterns

Behavioral design patterns are concerned with algorithms and the assignment of responsibilities between objects.