Typescript design patterns Page
TypeScript Design Patterns
Return to Design Patterns or TypeScript
Creational Patterns
=Abstract Factory
=
Abstract Factory - Abstract Factory Pattern - Abstract Factory Design Pattern: "Lets you produce families of related objects without specifying their concrete classes."
* https://refactoring.guru/design-patterns/abstract-factory
* https://refactoring.guru/design-patterns/abstract-factory/typescript/example#example-0
* https://refactoring.guru/design-patterns/abstract-factory/typescript/example#lang-features
=Builder
=
Builder - Builder Pattern - Builder Design Pattern: "Lets you construct complex objects step by step. The pattern allows you to produce different types and representations of an object using the same construction code."
* Main article:
* Usage in TypeScript:
* Code example:
=Factory Method
=
Factory - Factory Method - Factory Method Pattern - Factory Method Design Pattern: "Provides an interface for creating objects in a superclass, but allows subclasses to alter the type of objects that will be created."
* Main article:
* Usage in TypeScript:
* Code example
=Prototype
=
Prototype - Prototype Pattern - Prototype Design Pattern: "Lets you copy existing objects without making your code dependent on their classes."
* Main article:
* Usage in TypeScript:
* Code example
=Singleton
=
Singleton - Singleton Pattern - Singleton Design Pattern: "Lets you ensure that a class has only one instance, while providing a global access point to this instance."
* Main article:
* Usage in TypeScript:
* Code example
----
Structural Patterns
Structural Patterns - Structural Design Patterns include:
* Adapter - Adapter Pattern - Adapter Design Pattern
* Bridge - Bridge Pattern - Bridge Design Pattern
* Composite - Composite Pattern - Composite Design Pattern
* Decorator - Decorator Pattern - Decorator Design Pattern
* Facade - Facade Pattern - Facade Design Pattern
* Flyweight - Flyweight Pattern - Flyweight Design Pattern
* Proxy - Proxy Pattern - Proxy Design Pattern
=Adapter
=
Adapter
Allows objects with incompatible interfaces to collaborate.
Main article
Usage in TypeScript
Code example
=Bridge
=
Bridge
Lets you split a large class or a set of closely related classes into two separate hierarchies—abstraction and implementation—which can be developed independently of each other.
Main article
Usage in TypeScript
Code example
=Composite
=
Composite
Lets you compose objects into tree structures and then work with these structures as if they were individual objects.
Main article
Usage in TypeScript
Code example
=Decorator
=
Decorator
Lets you attach new behaviors to objects by placing these objects inside special wrapper objects that contain the behaviors.
Main article
Usage in TypeScript
Code example
=Facade
=
Facade
Provides a simplified interface to a library, a framework, or any other complex set of classes.
Main article
Usage in TypeScript
Code example
=Flyweight
=
Flyweight
Lets you fit more objects into the available amount of RAM by sharing common parts of state between multiple objects instead of keeping all of the data in each object.
Main article
Usage in TypeScript
Code example
=Proxy
=
Proxy
Lets you provide a substitute or placeholder for another object. A proxy controls access to the original object, allowing you to perform something either before or after the request gets through to the original object.
Main article
Usage in TypeScript
Code example
----
Behavioral Patterns
Behavioral Patterns include:
* Chain of Responsibility - Chain of Responsibility Pattern - Chain of Responsibility Design Pattern
* Command - Command Pattern - Command Design Pattern
* Iterator - Iterator Pattern - Iterator Design Pattern
* Mediator - Mediator Pattern - Mediator Design Pattern
* Memento - Memento Pattern - Memento Design Pattern
* - Pattern - Design Pattern
* - Pattern - Design Pattern
* - Pattern - Design Pattern
* - Pattern - Design Pattern
* - Pattern - Design Pattern
=Chain of Responsibility
=
Chain of Responsibility
Lets you pass requests along a chain of handlers. Upon receiving a request, each handler decides either to process the request or to pass it to the next handler in the chain.
Main article
Usage in TypeScript
Code example
=Command
=
Command
Turns a request into a stand-alone object that contains all information about the request. This transformation lets you parameterize methods with different requests, delay or queue a request's execution, and support undoable operations.
Main article
Usage in TypeScript
Code example
=Iterator
=
Iterator
Lets you traverse elements of a collection without exposing its underlying representation (list, stack, tree, etc.).
Main article
Usage in TypeScript
Code example
=Mediator
=
Mediator
Lets you reduce chaotic dependencies between objects. The pattern restricts direct communications between the objects and forces them to collaborate only via a mediator object.
Main article
Usage in TypeScript
Code example
=Memento
=
Memento
Lets you save and restore the previous state of an object without revealing the details of its implementation.
Main article
Usage in TypeScript
Code example
Observer
Observer
Lets you define a subscription mechanism to notify multiple objects about any events that happen to the object they're observing.
Main article
Usage in TypeScript
Code example
State
State
Lets an object alter its behavior when its internal state changes. It appears as if the object changed its class.
Main article
Usage in TypeScript
Code example
Strategy
Strategy
Lets you define a family of algorithms, put each of them into a separate class, and make their objects interchangeable.
Main article
Usage in TypeScript
Code example
Template Method
Template Method
Defines the skeleton of an algorithm in the superclass but lets subclasses override specific steps of the algorithm without changing its structure.
Main article
Usage in TypeScript
Code example
Visitor
Visitor
Lets you separate algorithms from the objects on which they operate.
Main article
Usage in TypeScript
Code example
----
* g>TypeScript Design Patterns
Fair Use Source: https://refactoring.guru/design-patterns/typescript
{{navbar_designpatterns}}
{{navbar_footer}}