Instead of doing the popular Advent of Code, this year I tried to complete the Advent of TypeScript. In this article, you'll find my solutions and some details on how they work or what I learned while solving the challenge.
With the omnipresence of Babel and TypeScript in the Frontend universe, the JavaScript compatibility of our applications is (almost) no longer an issue. For HTML, only a few attributes have been added since HTML5 for bonus features (lazyload, prefetch, etc.). They are generally ignored by incompatible browsers. What about CSS? There are no proper polyfills, very heterogeneous support, and even a slight misstep with display: grid can be disastrous for the visuals. So, how do we rationalize our CSS? Let's explore that together.
In TypeScript, it is possible to define types in several ways: interface, class, enum, the type keyword, as const, and more. In this article, we will focus on types constructed from a discriminated union and the advantages of such a practice. In TypeScript, unions are created using the | symbol (e.g., type Union = A | B | C). The term "disjoint" is not accidental because, unlike polymorphism, the types we will use may have nothing in common.
Unfortunately, it is not (yet) possible in JavaScript, nor in TypeScript. But we can try to get closer to it, especially by separating the identification of a scenario from its execution. The goal is to enhance readability and bring the code closer to the problem it solves. To illustrate this, we will use the example of processing a blog article (adding, deleting, publishing, etc.) based on the information contained in the article. Additionally, I suggest we take it step by step so that you can apply this refactoring in your code.