avatarItchimonji

Free AI web copilot to create summaries, insights and extended knowledge, download it at here

3586

Abstract

https://refactoring.guru/design-patterns/composite/typescript/example"><b>Refactoring Guru</b></a>.</p><div id="19a4" class="link-block"> <a href="https://refactoring.guru/design-patterns/composite/typescript/example"> <div> <div> <h2>Composite in TypeScript</h2> <div><h3>Composite pattern in TypeScript. Full code example in TypeScript with detailed comments and explanation. Composite is a…</h3></div> <div><p>refactoring.guru</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*XifVwl6MSybqcD8E)"></div> </div> </div> </a> </div><p id="8c48">We use the analogy of a rank system in the military. The <b>abstract base class</b> is a soldier, who should <i>salute()</i> the superior.</p><figure id="f922"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*nHqX9H4sRpZqDuXpAJA_QQ.png"><figcaption>abstract base class</figcaption></figure><p id="edc9">A <b>Composite</b> interacts as a node for further <b>Composites</b> or <b>Leafs</b>. For the analogy, this is a general or an officer.</p><figure id="c499"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*VCN13qi4wKBUKGpdoSV3zA.png"><figcaption>Composite that accepts or removes children</figcaption></figure><p id="2af0">You can add or remove children that get called with the <i>salute()</i> function to salute.</p><figure id="f5d9"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*KC6MNHQ1sSq_ScFiWU3Lvg.png"><figcaption>Composite that calls its children</figcaption></figure><p id="1424">At last, there is a <b>Leaf</b> that reflects the soldier who only salutes the superior.</p><figure id="d051"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*MZCnP13M9bSEH5W_dXT-Tw.png"><figcaption>Leaf</figcaption></figure><p id="f785">The client can generate its own tree of <b>Composite</b> and <b>Leaf</b> children. The <i>salute()</i> function iterates through the structure.</p><figure id="0440"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/1*LU1r8piljWoiD9M5GoPhVA.png"><figcaption>client</figcaption></figure><h1 id="789f">Conclusion</h1><p id="6433"><a href="https://en.wikipedia.org/wiki/Software_design_pattern"><b>Design Patterns</b></a> are an important resource and base knowledge for every developer — they are very helpful for solving programmatic problems, help with consistent communication with other developers about system design, and serve as a significant introduction into <a href="https://readmedium.com/inheritance-object-composition-84c9539eeaf9"><b>object composition</b></a> (besides inheritance) and <a href="https://en.wikipedia.org/wiki/Dependency_inversion_principle"><b>dependency inversion</b></a>.</p><p id="280d"><i>Structural Patterns</i> are indispensable when objects are combined to create new functionalities. Comprehensive structures are built by using compositions of classes and objects. This provides flexibility due to variable composition structure depending on the runtime. One thus achieves an increase in efficiency and consistency.</p><h1 id="3a44">Code example on GitHub</h1><div id="3c31" class="link-block"> <a href="https://github.com/Itchimonji/design-patterns-in-typescript"> <div> <div> <h2>Itchimonji/design-patterns-in-typescript</h2> <div><h3>Simple prjoject to train Design Patterns. Contribute to Itc

Options

himonji/design-patterns-in-typescript development by…</h3></div> <div><p>github.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*xj2Epak4DPEbLlSb)"></div> </div> </div> </a> </div><h1 id="5d55">Learn More</h1><div id="1f9e" class="link-block"> <a href="https://readmedium.com/how-to-monitor-a-distributed-system-with-a-nestjs-application-edb86d170d4e"> <div> <div> <h2>How To Monitor a Distributed System with a NestJS Application</h2> <div><h3>Let us take a look into NestJS’ internal healthcheck module, and combine it with a Prometheus client</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*yvk5gRNb-8LbOwRq__-mbg.jpeg)"></div> </div> </div> </a> </div><div id="2ac2" class="link-block"> <a href="https://readmedium.com/adapter-cheat-sheet-f2955b065d40"> <div> <div> <h2>Adapter | Cheat Sheet</h2> <div><h3>Structural Pattern — Design Patterns Series</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*o_UMH58ue6ifLOjmYc2ZRg.png)"></div> </div> </div> </a> </div><div id="e6ee" class="link-block"> <a href="https://readmedium.com/facade-cheat-sheet-7ae790b07d77"> <div> <div> <h2>Facade | Cheat Sheet</h2> <div><h3>Structural Pattern — Design Patterns Series</h3></div> <div><p>medium.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/1*8qzkbM4-5HZoos_ahraosA.png)"></div> </div> </div> </a> </div><h1 id="dff3">Resources</h1><div id="1c0c" class="link-block"> <a href="https://www.informit.com/store/design-patterns-elements-of-reusable-object-oriented-9780201633610"> <div> <div> <h2>Design Patterns: Elements of Reusable Object-Oriented Software</h2> <div><h3>Capturing a wealth of experience about the design of object-oriented software, four top-notch designers present a…</h3></div> <div><p>www.informit.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*fr7Wge0uQB3vslgN)"></div> </div> </div> </a> </div><div id="09dc" class="link-block"> <a href="https://refactoring.guru/design-patterns"> <div> <div> <h2>Design Patterns</h2> <div><h3>Design patterns are typical solutions to common problems in software design. Each pattern is like a blueprint that you…</h3></div> <div><p>refactoring.guru</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*EWbf1LuaX2vSuV88)"></div> </div> </div> </a> </div></article></body>

Composite | Cheat Sheet

Structural Pattern — Design Patterns Series

Composite is used for mapping part-whole hierarchies with object composition in tree structures. With this you have a consistent handling of individual objects as well as object compositions. Real-life examples are folder structures of operating systems or rank systems in military or companies.

An advantage of this pattern is that the client should not distinguish between individual objects and object compositions (Leaf / Composite) and that it facilitates the addition of new component types. Newly defined Composite or Leaf classes automatically work together with existing structures.

To reduce the memory size by sharing the abstract component, you can combine the Composite pattern with Singleton or Flyweight. To get an order for the child object, the pattern can be extended with an Iterator.

Real-life examples

  • Rank system in the military (general — officers — soldiers)
  • Operating systems folder structure
  • Managers who leads employees (Hierarchy structure)
  • Collection of things with same interface: animal collection, tree collection, or house collection
typical object structure

Meaning

  • Composition of objects in tree structures for mapping part-whole hierarchies
  • Consistent handling of individual objects as well as object compositions

Applicability (suitable if …)

  • The part-whole hierarchies of objects are supposed to be represented
  • The client should not distinguish between individual objects and object compositions (but uniform treatment)

Assets and Drawbacks

  • Defines class hierarchies consisting of compound objects
  • Client does not know whether it is an individual object (Leaf) or composite component (Component/Composite)
  • Facilitates the addition of new component types. Newly defined composite or Leaf classes automatically work together with existing structures
  • System design becomes universal as the structure cannot be bounded (only with runtime checks) as opposed to composition with specific components

Extensibility

  • Explicit references to parent objects: easier traversal and management of the structure through better navigation
  • Abstract component sharing: to reduce memory usage (combination with Singleton or Flyweight)
  • Order of child objects (e.g. front-to-back order) by Iterator
  • Use of caching for frequent traversal
  • Leaf object can also vary from the class instance

Example

For this example I was inspired by Refactoring Guru.

We use the analogy of a rank system in the military. The abstract base class is a soldier, who should salute() the superior.

abstract base class

A Composite interacts as a node for further Composites or Leafs. For the analogy, this is a general or an officer.

Composite that accepts or removes children

You can add or remove children that get called with the salute() function to salute.

Composite that calls its children

At last, there is a Leaf that reflects the soldier who only salutes the superior.

Leaf

The client can generate its own tree of Composite and Leaf children. The salute() function iterates through the structure.

client

Conclusion

Design Patterns are an important resource and base knowledge for every developer — they are very helpful for solving programmatic problems, help with consistent communication with other developers about system design, and serve as a significant introduction into object composition (besides inheritance) and dependency inversion.

Structural Patterns are indispensable when objects are combined to create new functionalities. Comprehensive structures are built by using compositions of classes and objects. This provides flexibility due to variable composition structure depending on the runtime. One thus achieves an increase in efficiency and consistency.

Code example on GitHub

Learn More

Resources

Design Patterns
Structural Patterns
Composite
Cheatsheet
Object Composition
Recommended from ReadMedium