This post lists UML diagrams of GoF design pattern examples written in TypeScript. The UML diagrams are displayed using Diagram Map. If you want to know about Diagram Map, see this post. Also, you can get UML model data and TypeScript code of the examples from here.
Table of Contents
- Behavioral Patterns
- Creational Patterns
- Structural Patterns
- References
- Links
Chain of Responsibility
Pattern Intent
Avoid coupling the sender of a request to its receiver by giving more than one object a chance to handle the request. Chain the receiving objects and pass the request along the chain until an object handles it (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
A trouble is turned around among supporters, and the trouble will be handled by the supporter who can handle it. There are four types of supporters below:
Open the diagram in full screen
Command
Pattern Intent
Encapsulate a request as an object, thereby letting you parametrize clients with different requests, queue or log requests, and support undoable operations (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
Simple drawing application:
Open the diagram in full screen
Interpreter
Pattern Intent
Given a language, define a representation for its grammar along with an interpreter that uses the representation to interpret sentences in the language (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
An interpreter for mini language to operate radio controlled car. It parses the following syntax composed of "forward", "left", "right", and "repeat" commands:
<program> ::= program <command list>
<command list> ::= <command>* end
<command> ::= <repeat> | <action>
<repeat> ::= repeat <number> <command list>
<action> ::= forward | right | left
<number> ::= 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
Open the diagram in full screen
Iterator
Pattern Intent
Provide a way to access the elements of an aggregate object sequentially without exposing its underlying representation (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
Add books in a bookshelf and display the names of the book in turn.
Open the diagram in full screen
Mediator
Pattern Intent
Define an object that encapsulates how a set of objects interact. Mediator promotes loose coupling by keeping objects from referring to each other explicitly, and it lets you vary their interaction independently (Design Patterns: Elements of Reusable Object-Oriented Software).
And change the editable properties of the elements depending on the state of the radio buttons and text fields. Execution Result: TypeScript Code: View on GitHubAbout This Example
Show a login dialog for entering a username and password. The dialog has the following elements:
Open the diagram in full screen
Memento
Pattern Intent
Without violating encapsulation, capture and externalize an object's internal state so that the object can be returned to this state later (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
A dice game in which money increases and decreases:
Open the diagram in full screen
Observer
Pattern Intent
Define a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
Observers observe a Subject object holding a numerical value and display the value. The display formats are digits and bar charts.
Open the diagram in full screen
State
Pattern Intent
Allow an object to alter its behavior when its internal state changes. The object will appear to change its class (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
Safe security system that the security status changes with time. When you press a button in a dialog, the message displayed will change depending on whether the time is day or night. The internal time of the dialog advances one hour for every second of real time.
Open the diagram in full screen
Strategy
Pattern Intent
Define a family of algorithms, encapsulate each one, and make them interchangeable. Strategy lets the algorithm vary independently from the clients that use it (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
A game of rock-scissors-paper. Two strategies are available:
Open the diagram in full screen
Template Method
Pattern Intent
Define the skeleton of an algorithm in an operation, deferring some steps to client subclasses. Template Method lets subclasses redefine certain steps of an algorithm without changing the algorithm's structure (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
Display a character or string repeatedly 5 times.
Open the diagram in full screen
Visitor
Pattern Intent
Represent an operation to be performed on the elements of an object structure. Visitor lets you define a new operation without changing the classes of the elements on which it operates (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
Visitor visits the file system composed of files and directories, and displays a list of files/directories.
Open the diagram in full screen
Abstract Factory
Pattern Intent
Provide an interface for creating families of related or dependent objects without specifying their concrete classes (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
Create a hierarchical link collection as an HTML file. It can be created in either tabular or list format.
Open the diagram in full screen
Builder
Pattern Intent
Separate the construction of a complex object from its representation so that the same construction process can create different representations (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
Create documents in HTML format and text format. It is possible to create different documents in the same construction process.
Open the diagram in full screen
Factory Method
Pattern Intent
Define an interface for creating an object, but let subclasses decide which class to instantiate. Factory Method lets a class defer instantiation to subclasses (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
The subject is a factory to make credit cards. The Factory defines how to create an credit card, but the actual credit card is created by the CreditCardFactory. The "createProduct()" is called a Factory Method, and it is responsible for manufacturing an object.
Open the diagram in full screen
Prototype
Pattern Intent
Specify the kinds of objects to create using a prototypical instance, and create new objects by copying this prototype (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
Display a string enclosed with a frame line, or drawn with an underline. The Client (Main) registers instances of the Display subclass in the Manager class. When necessary, the Manager class asks those registered instances to return a clone. The Client (Main) requires the returned clones to display.
Open the diagram in full screen
Singleton
Pattern Intent
Ensure a class has only one instance, and provide a global point of access to it (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
Check whether the same instance is obtained.
Open the diagram in full screen
Adapter
Pattern Intent
Convert the interface of a class into another interface clients expect. Adapter lets classes work together that couldn't otherwise because of incompatible interfaces (Design Patterns: Elements of Reusable Object-Oriented Software).
or display it as follows. Execution Result: TypeScript Code: View on GitHubAbout This Example
Display the given string as follows
-- Nice to meet you --
[[ Nice to meet you ]]
Open the diagram in full screen
Bridge
Pattern Intent
Decouple an abstraction from its implementation so that the two can vary independently (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
Display only one line or display the specified number of lines.
Open the diagram in full screen
Composite
Pattern Intent
Compose objects into tree structures to represent whole-part hierarchies. Composite lets clients treat individual objects and compositions of objects uniformly (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
Represents a file system composed of files and directories. FileSystemElement makes it possible to treat File and Directory uniformly.
Open the diagram in full screen
Decorator
Pattern Intent
Attach additional responsibilities to an object dynamically. Decorators provide a flexible alternative to subclassing for extending functionality (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
Display a string with decorative frames. The frames can be combined arbitrarily.
Open the diagram in full screen
Facade
Pattern Intent
Provide a unified interface to a set of interfaces in a subsystem. Facade defines a higher-level interface that makes the subsystem easier to use (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
Create a simple homepage through a Facade (PageCreator). The Facade gets info from the DataLibrary and uses the info to create an HTML file.
Open the diagram in full screen
Flyweight
Pattern Intent
Use sharing to support large numbers of fine-grained objects efficiently (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
Display a string consisting of large characters (0-9 digits only). Large character objects are not created until they are needed. And the created objects are reused.
Open the diagram in full screen
Proxy
Pattern Intent
Provide a surrogate or placeholder for another object to control access to it (Design Patterns: Elements of Reusable Object-Oriented Software).
Execution Result: TypeScript Code: View on GitHubAbout This Example
Print on a named printer. Setting and changing the printer name is done by Proxy (ProxyPrinter). At the time of printing, create an instance of the RealSubject (RealPrinter) for the first time.
Open the diagram in full screen
References
- Gamma, E. et al. Design Patterns: Elements of Reusable Object-Oriented Software, Addison-Wesley, 1994
- Hiroshi Yuki. Learning Design Patterns in Java [In Japanese Language], Softbank publishing, 2004
Top comments (1)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.