This article will showcase the usage of these four great features in the context of creating a chat app:
- Union types
- Type guards
- Readonly properties
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:
The code to carry this out is very straightforward:
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 kind 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.
This feature is used to apply attributes to only those HTML elements that have them defined. For example, the href attribute defined for a subset of HTML elements.
An example usage is defined as below:
All data containers defined in the chat app are immutable. A typical example is as below:
The complete source code can be found here. If you like the article kindly hammer the clap button. Thanks.
The HTML layout and CSS for the chat app are “borrowed” from this great project.