In 1995, the Gang of Four (GoF) published a book named Design Patterns: Elements of Reusable Object-Oriented Software. In it, the authors, Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides, describe a number of classic software design patterns, which present simple and elegant solutions to common software problems. If you have never heard of design patterns, such as a Factory pattern, Composite pattern, Observer pattern, or Singleton pattern, then reading through this GoF book is highly recommended.

The design patterns presented by the GoF have been reproduced in many different programming languages, including Java and C#. Vilic Vane has authored a book named TypeScript Design Patterns, in which each of these GoF patterns is implemented and discussed from a TypeScript perspective.

In Chapter 3, Interfaces, Classes, and Inheritance, of our book, we took some time to build a classic Factory pattern implementation, which is one of the more popular design patterns described by the GoF. TypeScript, with its ES6 and ES7 language-compatible constructs, is a perfect example of an object-oriented language. With classes, abstract classes, interfaces, inheritance, and generics, TypeScript applications can now take full advantage of any of the GoF design patterns.

Describing the implementation of each of these GoF patterns in the TypeScript language is a subject that cannot be covered in a single chapter, and would do injustice to the excellent coverage of the GoF patterns covered by Vilic Vane.

In this chapter, therefore, we will focus on the process of writing object-oriented code, and work through an example of two of the GoF design patterns that work very well together when dealing with complicated UI layouts. These are the State and Mediator design patterns, which focus on application state, and how objects interact with each other. We will build an Angular 2 application that uses a rather complex UI design, and which includes a number of sophisticated CSS animated transitions. We will then start the process of reworking our original application to apply object-oriented design principles, and discuss how objects in our application interact. We will then implement the State and Mediator design patterns in order to encapsulate the logic that is used to determine what UI elements are shown depending on the state of the application.

In this chapter, we will be covering the following topics:

• Object-oriented principles
• Using interfaces
• SOLID principles
• User interface design
• The State pattern
• The Mediator pattern
• Modular code