Discover advanced TypeScript concepts: Gain insights into compiler flags, generic types, and discriminated unions. Delve into writing error-free code and mastering complex error messages with confidence.

typescript-3.7.5.tar.gz

TypeScript 3.7.5 Strict

TypeScript 3.7.5

Are you using TypeScript, but feel like you’re not making the most out of it? Do you find some advanced TypeScript concepts confusing? Do you get lost looking at complex type errors?

If you answered “yes” to any of these questions, then this course is for you! It introduces you to the world of advanced TypeScript concepts including: compiler flags for catching more errors, generic types, and how to compose types with discriminated unions. 

After finishing this course, you’ll feel more confident in your TypeScript skills. You will be able to write types that detect whole classes of possible runtime errors at compile time. Typing even the most untypeable JavaScript code will be a no brainer for you, and you’ll be fluent in TypeScript error messages.

Advanced TypeScript Masterclass

# Introduction to state machines

Managing the state is one of the hardest parts of frontend development. Many frameworks and libraries have been created to help with this task. One of the proposed approaches is to utilize **state machines**. A state machine is a directed graph where nodes represent all possible states of a view or of the whole app, and where edges represent possible transitions between the states.

An arrow between two nodes means that it's possible to go through one state to another via some action. All non-listed transitions are not possible. There can be a meaningful transition from a state to the same state that is marked by a circular arrow.

Using state machines is an explicit and safe way of dealing with the state. They're particularly useful when the state is very complex and involves multiple transitions.

# Example: Data fetching workflow

One very common task in web applications is loading data from the backend. Let's build a state machine that represents this workflow. The solution will be based on Redux architecture.

Let's say that the user can request data to be fetched by clicking on a button. It should also be possible to cancel the request. When data is being fetched, a loading indicator should be shown. Data fetching can be successful, in which case it will show the fetched data. It can also fail, in which case it will show an error.

Based on the above description, we can build the following state machine.

This lesson talks about state machines, a concept closely related to discriminated unions.

Strict types

Generics

Composing types

Advanced types

TypeScript in practice

Conclusion

State Machines

Introduction to state machines