Mastering TypeScript 3 - Third Edition

State interface

The State pattern helps us to define these states in code. The basic principle of the State design pattern is that we create an interface or an abstract base class that defines the properties of each state, and we then create concrete classes for each specialization. In our application, then, we have two main questions that we need to ask each state:

• Is the side panel visible?
• Are we on the main panel or the detail panel?

Additionally, if we are on the main panel, then we also need to know whether to show the > arrow on the top left of the main panel, or the < arrow. This is tied to whether the side panel is visible or not. Let's create a file named StateMediator.ts to hold our interfaces, as follows:

export enum StateType ...