The chat interface This article will showcase the usage of these four great features in the context of creating a chat app: Async/Await Union types Type guards Readonly properties Async/Await This feature enables you to define and call asynchronous code simply and concisely. In the context of the chat app, users need to logon to the chat room via a network call. To keep the UI responsive you need to: Make the call asynchronously Inform the user that the logon is pending Update the UI once the user is successfully logged on as below: Logon process The code to carry this out is very straightforward: Union types This feature enables you to define a family of types using a lightweight syntax. You are able to do so without defining a class hierarchy. In the context of the chat app it is used to define the kinds of messages that can be displayed in the chatbox: The individual message types are defined as follows: They all define a common property that you can use to determine what kind of message you are working with. In the example below every message type gets a template for display on the chat box depending on it’s kind. kind Type guards Type Guards allow you to narrow down the type of an object within a conditional block. This feature is used to apply attributes to only those HTML elements that have them defined. For example, the attribute defined for a subset of HTML elements. href An example usage is defined as below: Readonly properties TypeScript’s type system allows you to mark individual properties on an interface as [readonly](https://basarat.gitbooks.io/typescript/docs/types/readonly.html) . This allows you to work in a functional way (unexpected mutation is bad). All data containers defined in the chat app are immutable. A typical example is as below: Parting shot The complete source code can be found . If you like the article kindly hammer the clap button. Thanks. here Acknowledgments The layout and for the chat app are “borrowed” from this . HTML CSS great project
