MCPcopy Index your code
hub / github.com/RefactoringGuru/design-patterns-typescript

github.com/RefactoringGuru/design-patterns-typescript @main

Chat with this repo
repository ↗ · DeepWiki ↗ · + Follow
1,025 symbols 1,644 edges 55 files 192 documented · 19%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

Design Patterns in TypeScript

This repository is part of the Refactoring.Guru project.

It contains TypeScript examples for all classic GoF design patterns. Each pattern includes two examples:

  • [x] Conceptual examples show the internal structure of patterns, including detailed comments.

  • [x] RealWorld examples show how patterns can be used in real-world web applications.

Requirements

For simplicity reasons, the examples are console apps. In order to launch them, you have to install Node.js and NPM on your computer and then install TypeScript compiler and TypeScript Node extension like this:

npm install -g typescript
npm install -g ts-node

When you have all the required software installed, the examples can be launched via the command line as follows:

ts-node src/Path-to-example/Example.ts

For the best experience, I recommend working with examples with these IDEs:

Contributor's Guide

I appreciate any help, whether it's a simple fix of a typo or a whole new example. Please read the Contributor's Guide to get more information.

License

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

Creative Commons License

Credits

Authors: Alexey Pyltsyn (@lex111) and Alexander Shvets (@neochief)

Contributors: See the list of contributors

Extension points exported contracts — how you extend this code

VisitableComponent (Interface)
* EN: The Component interface declares an accept method that should take the * base visitor interface as an argument. [11 …
src/Visitor/RealWorld/index.ts
WeatherService (Interface)
* EN: The WeatherService defines the SDK interface and response [8 implementers]
src/Proxy/RealWorld/index.ts
Product (Interface)
* EN: The Product interface declares the operations that all concrete products * must implement. * * RU: Интерфейс Пр [14 …
src/FactoryMethod/Conceptual/index.ts
ContentTypeImplementation (Interface)
* EN: The Implementation defines the interface for the second dimension = all * the content types [6 implementers]
src/Bridge/RealWorld/index.ts
Command (Interface)
* EN: The Command interface declares a method for executing a command. * * RU: Интерфейс Команды объявляет метод для в [5 …
src/Command/Conceptual/index.ts
Controller (Interface)
(no doc) [6 implementers]
src/Decorator/RealWorld/index.ts
Mediator (Interface)
* EN: The Mediator interface declares a method used by components to notify the * mediator about various events. The Me [4 …
src/Mediator/Conceptual/index.ts
Observer (Interface)
* EN: The Observer interface declares the update method, used by subjects. * * RU: Интерфейс Наблюдателя объявляет мет [4 …
src/Observer/Conceptual/index.ts

Core symbols most depended-on inside this repo

log
called by 252
src/AbstractFactory/RealWorld/index.ts
addContact
called by 13
src/Iterator/RealWorld/index.ts
add
called by 10
src/Composite/RealWorld/index.ts
handle
called by 9
src/ChainOfResponsibility/RealWorld/index.ts
operation
called by 8
src/Decorator/Conceptual/index.ts
notify
called by 6
src/Mediator/RealWorld/index.ts
insertCoin
called by 6
src/State/RealWorld/index.ts
add
called by 6
src/Composite/Conceptual/index.ts

Shape

Method 521
Class 378
Interface 62
Function 60
Enum 4

Languages

TypeScript100%

Modules by API surface

src/AbstractFactory/Book/index.ts39 symbols
src/TemplateMethod/RealWorld/index.ts37 symbols
src/Builder/Book/index.ts37 symbols
src/Bridge/RealWorld/index.ts34 symbols
src/AbstractFactory/RealWorld/index.ts33 symbols
src/AbstractFactory/Conceptual/index.ts31 symbols
src/State/RealWorld/index.ts30 symbols
src/Visitor/RealWorld/index.ts29 symbols
src/Builder/RealWorld/index.ts27 symbols
src/Prototype/RealWorld/index.ts26 symbols
src/State/Book/index.ts24 symbols
src/Memento/RealWorld/index.ts24 symbols

For agents

$ claude mcp add design-patterns-typescript \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact