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

• Behavioral Patterns
  • Chain of Responsibility
  • Command
  • Interpreter
  • Iterator
  • Mediator
  • Memento
  • Observer
  • State
  • Strategy
  • Template Method
  • Visitor
• Creational Patterns
  • Abstract Factory
  • Builder
  • Factory Method
  • Prototype
  • Singleton
• Structural Patterns
  • Adapter
  • Bridge
  • Composite
  • Decorator
  • Facade
  • Flyweight
  • Proxy
• 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).

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:

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:

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

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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

or display it as follows.

[[ Nice to meet you ]]

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:

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:

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:

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:

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:

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:

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

• Diagram Map: tracing UML/SysML elements across diagrams
• Design Pattern Examples in TypeScript