DEV Community

Cover image for UML diagram for GoF design pattern examples in TypeScript
Takaaki Teshima
Takaaki Teshima

Posted on • Updated on

UML diagram for GoF design pattern examples in TypeScript

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

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).

About 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:
  • LazySupporter doesn't handle any trouble
  • MoodySupporter handles odd ID troubles
  • SpecialSupporter handles a trouble of the target ID.
  • LimitedSupporter handles troubles below the limit ID.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About This Example
Simple drawing application:
  • Draw a path with points by dragging the mouse.
  • Revert to one previous drawing by pressing the Undo button.
  • Erase all drawing by pressing the Clear button.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About 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
Enter fullscreen mode Exit fullscreen mode

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About This Example
Add books in a bookshelf and display the names of the book in turn.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About This Example
Show a login dialog for entering a username and password. The dialog has the following elements:
  • "Guest" and "Login" radio buttons
  • "Username" and "Password" text fields
  • "OK" and "Cancel" buttons

And change the editable properties of the elements depending on the state of the radio buttons and text fields.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About This Example
A dice game in which money increases and decreases:
  • A gamer shakes a dice and the number determine the next state.
  • If the number of dice is even, gamer's money doubles, and if it is odd, gamer's money is halved.
  • If the gamer's money is less than half of the highest amount, it returns to the highest amount.
  • The game is repeated

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About This Example
Observers observe a Subject object holding a numerical value and display the value. The display formats are digits and bar charts.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About 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.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About This Example
A game of rock-scissors-paper. Two strategies are available:
  • Random Strategy: showing a random hand signal.
  • Mirror Strategy: showing a hand signal from the previous opponent's hand signal.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About This Example
Display a character or string repeatedly 5 times.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About This Example
Visitor visits the file system composed of files and directories, and displays a list of files/directories.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About This Example
Create a hierarchical link collection as an HTML file. It can be created in either tabular or list format.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About This Example
Create documents in HTML format and text format. It is possible to create different documents in the same construction process.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About 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.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About 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.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About This Example
Check whether the same instance is obtained.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About This Example
Display the given string as follows
-- Nice to meet you --
Enter fullscreen mode Exit fullscreen mode

or display it as follows.

[[ Nice to meet you ]]
Enter fullscreen mode Exit fullscreen mode

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About This Example
Display only one line or display the specified number of lines.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About This Example
Represents a file system composed of files and directories. FileSystemElement makes it possible to treat File and Directory uniformly.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About This Example
Display a string with decorative frames. The frames can be combined arbitrarily.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About 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.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About 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.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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).

About 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.

Execution Result:
Execution Result

TypeScript Code: View on GitHub


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

Links

Top comments (1)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.