UML diagram for GoF design pattern examples in TypeScript
Tags: uml, gof, designpatterns, typescript
Published: 2021-05-17 12:44:33

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](https://dev.to/takaakit/diagram-map-tracing-uml-sysml-elements-across-diagrams-49i7). Also, you can get UML model data and TypeScript code of the examples from [here](https://github.com/takaakit/design-pattern-examples-in-typescript).  

### Table of Contents
* Behavioral Patterns  
  * [Chain of Responsibility](#chain-of-responsibility)
  * [Command](#command)
  * [Interpreter](#interpreter)
  * [Iterator](#iterator)
  * [Mediator](#mediator)
  * [Memento](#memento)
  * [Observer](#observer)
  * [State](#state)
  * [Strategy](#strategy)
  * [Template Method](#template-method)
  * [Visitor](#visitor)
* Creational Patterns  
  * [Abstract Factory](#abstract-factory)
  * [Builder](#builder)
  * [Factory Method](#factory-method)
  * [Prototype](#prototype)
  * [Singleton](#singleton)
* Structural Patterns  
  * [Adapter](#adapter)
  * [Bridge](#bridge)
  * [Composite](#composite)
  * [Decorator](#decorator)
  * [Facade](#facade)
  * [Flyweight](#flyweight)
  * [Proxy](#proxy)
* [References](#references)
* [Links](#links)

# Chain of Responsibility <a name="chain-of-responsibility"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **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](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/chain-of-responsibility/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/chain-of-responsibility)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/9zk4faog/3/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/chain-of-responsibility/DiagramMap.html)

# Command <a name="command"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **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](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/command/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/command)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/6b4nvscm/2/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/command/DiagramMap.html)

# Interpreter <a name="interpreter"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **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:
![Execution Result](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/interpreter/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/interpreter)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/5f9u1Lmy/3/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/interpreter/DiagramMap.html)

# Iterator <a name="iterator"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **About This Example** %}
Add books in a bookshelf and display the names of the book in turn.  

Execution Result:
![Execution Result](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/iterator/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/iterator)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/r20hcqzg/5/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/iterator/DiagramMap.html)

# Mediator <a name="mediator"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **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](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/mediator/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/mediator)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/kdgw0var/5/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/mediator/DiagramMap.html)

# Memento <a name="memento"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **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](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/memento/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/memento)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/udwzpn2a/3/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/memento/DiagramMap.html)

# Observer <a name="observer"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **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](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/observer/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/observer)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/a5md90gz/3/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/observer/DiagramMap.html)

# State <a name="state"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **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](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/state/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/state)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/L3yhe8of/2/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/state/DiagramMap.html)

# Strategy <a name="strategy"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **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](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/strategy/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/strategy)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/kyLve8go/3/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/strategy/DiagramMap.html)

# Template Method <a name="template-method"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **About This Example** %}
Display a character or string repeatedly 5 times.

Execution Result:
![Execution Result](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/template-method/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/template-method)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/bcnt8qra/6/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/template-method/DiagramMap.html)

# Visitor <a name="visitor"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **About This Example** %}
Visitor visits the file system composed of files and directories, and displays a list of files/directories.

Execution Result:
![Execution Result](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/visitor/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/behavioral-patterns/visitor)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/c24b3rda/3/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/behavioral-patterns/visitor/DiagramMap.html)

# Abstract Factory <a name="abstract-factory"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **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](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/creational-patterns/abstract-factory/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/creational-patterns/abstract-factory)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/ews91mcL/2/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/creational-patterns/abstract-factory/DiagramMap.html)

# Builder <a name="builder"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **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](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/creational-patterns/builder/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/creational-patterns/builder)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/fra9yu5m/4/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/creational-patterns/builder/DiagramMap.html)

# Factory Method <a name="factory-method"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **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](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/creational-patterns/factory-method/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/creational-patterns/factory-method)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/rfg8t4dx/7/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/creational-patterns/factory-method/DiagramMap.html)

# Prototype <a name="prototype"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **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](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/creational-patterns/prototype/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/creational-patterns/prototype)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/p8z5dasv/4/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/creational-patterns/prototype/DiagramMap.html)

# Singleton <a name="singleton"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **About This Example** %}
Check whether the same instance is obtained.

Execution Result:
![Execution Result](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/creational-patterns/singleton/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/creational-patterns/singleton)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/3o9xz8mh/2/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/creational-patterns/singleton/DiagramMap.html)

# Adapter <a name="adapter"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **About This Example** %}
Display the given string as follows
```
-- Nice to meet you --
```
or display it as follows.
```
[[ Nice to meet you ]]
```

Execution Result:
![Execution Result](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/adapter/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/structural-patterns/adapter)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/huscqp84/3/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/adapter/DiagramMap.html)

# Bridge <a name="bridge"></a>

{% collapsible **Pattern Intent** %}
Decouple an abstraction from its implementation so that the two can vary independently (Design Patterns: Elements of Reusable Object-Oriented Software).
{% endcollapsible %}

{% collapsible **About This Example** %}
Display only one line or display the specified number of lines.

Execution Result:
![Execution Result](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/bridge/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/structural-patterns/bridge)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/3t7uy2av/5/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/bridge/DiagramMap.html)

# Composite <a name="composite"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **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](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/composite/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/structural-patterns/composite)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/9wsxz4Lb/4/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/composite/DiagramMap.html)

# Decorator <a name="decorator"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **About This Example** %}
Display a string with decorative frames. The frames can be combined arbitrarily.

Execution Result:
![Execution Result](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/decorator/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/structural-patterns/decorator)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/qu769pxy/3/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/decorator/DiagramMap.html)

# Facade <a name="facade"></a>

{% collapsible **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).
{% endcollapsible %}

{% collapsible **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](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/facade/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/structural-patterns/facade)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/gzp6c89d/5/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/facade/DiagramMap.html)

# Flyweight <a name="flyweight"></a>

{% collapsible **Pattern Intent** %}
Use sharing to support large numbers of fine-grained objects efficiently (Design Patterns: Elements of Reusable Object-Oriented Software).
{% endcollapsible %}

{% collapsible **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](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/flyweight/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/structural-patterns/flyweight)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/5su60q8b/3/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/flyweight/DiagramMap.html)

# Proxy <a name="proxy"></a>

{% collapsible **Pattern Intent** %}
Provide a surrogate or placeholder for another object to control access to it (Design Patterns: Elements of Reusable Object-Oriented Software).
{% endcollapsible %}

{% collapsible **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](https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/proxy/ExecutionResult.png?raw=true)

TypeScript Code: [View on GitHub](https://github.com/takaakit/design-pattern-examples-in-typescript/tree/master/structural-patterns/proxy)

{% endcollapsible %}

{% jsfiddle https://jsfiddle.net/takaakit2021/sfvo96k3/4/ result %}
[Open the diagram in full screen](https://htmlpreview.github.io/?https://github.com/takaakit/uml-diagram-for-typescript-design-pattern-examples/blob/master/structural-patterns/proxy/DiagramMap.html)

# References <a name="references"></a>
* 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 <a name="links"></a>
* [Diagram Map: tracing UML/SysML elements across diagrams](https://dev.to/takaakit/diagram-map-tracing-uml-sysml-elements-across-diagrams-49i7)
* [Design Pattern Examples in TypeScript](https://github.com/takaakit/design-pattern-examples-in-typescript)