 Resources from Rares Matei in 2022

When a manager gives us the requirements for an application feature, they don't care too much about *how* we build it. And often times, they think that hard things will be easy.

Dealing with time and coordinating different types of events can be tricky.

Luckily, we have RxJS to help!

In this course, you will use RxJS to build a loading spinner in an app that meets the ever-changing requirements from a mock Product Manager.

You'll also learn how to implement a "Konami Code" style feature that listens for a correct sequence of keys to be typed in a set amount of time.

Follow the thought process that Rares uses as he breaks problems down into manageable pieces that remain flexible, and become more comfortable solving problems reactively.

RxJS is a library for composing asynchronous and event-based programs by using observable sequences. 


rxjs

Thinking Reactively with RxJS

This course explores some of the new advanced TypeScript features, using practical examples you might encounter in your projects.


We’ll start off by demonstrating two new features that improve readability (numeric separators) and tighten type strictness in classes (strict property initialization). We’ll then improve type guards with a practical Redux-inspired example, followed by a lesson about writing more readable mapped type modifiers. We’ll use a summary on types vs. interfaces to transition to self-referencing types examples (and how to build custom type safe iterators around them). We’ll then cover a few ways to use the new conditional types, including building a recursive generic type that transforms any other type you pass into it, regardless of how deep it is, and makes it read-only — great for your immutable states! 


Finally, we’ll end with a lesson on building and chaining decorators to initialize and augment properties in classes.

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

Practical Advanced TypeScript

Bite-size video tutorials for badass web developers.

egghead

Thinking Reactively with RxJS-resource

At the core of a good client-side GraphQL library is a cache. The cache is very important for improving the efficiency of your data retrieval and providing your users with a clean user experience.

In this course, we're going to see how Apollo's powerful cache helps easily solve complex UI problems, such as pagination, handling loading and error states, optimistic updates, and minimizing network requests.

We'll start from the basics, and look at how to make queries and mutations, but then we'll look at how the cache is behind most of Apollo's immediate benefits. We'll explore in-depth how it works, how it stores data, and how we can manually modify it manually for advanced scenarios.

Even if your backend doesn't fully support GraphQL yet, we'll look at how to write GraphQL queries in your components that retrieve local client state under the hood - or that can even make REST API calls.

Apollo provides a universal GraphQL API on top of your existing services, so you can build new application features fast without waiting on backend changes.

apollo

Manage State in React Apps with Apollo Client and GraphQL

As you write TypeScript, the compiler will intelligently look at the flow of your logic and how it branches out and, if possible, will attempt to narrow down the type of different variables. It starts by inspecting the widest type a variable can have, and then depending on how it is used with JavaScript keywords such as `instanceof / typeof / if / else / return / switch` it narrows down to a more specific type.

Narrow Down the Type of Variable with Type Guards in TypeScript

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

Chrome DevTools makes it incredibly easy to try out new styles in the browser before we decide to commit anything to our project. It doesn't keep those changes between refreshes by default, though. So if we're running a local dev server, it might destroy our changes before we've had a chance to save them.

The new "Local overrides" tab in DevTools 65 solves this. Any time an edit is made in the DevTools, it copies the original file to a different folder, applies to the change we made to the copy, and then serves that copy instead every time the page is reloaded.

A complementary feature has also been added in the same version of the DevTools: the "Changes" tab. It gives a diff of all of the changes between all the original files and our local overrides.

Both these features add up to a much quicker and safer experience when trying out live CSS changes in the Chrome DevTools.

Persist Live Style Changes in the Browser with Chrome DevTools Local Overrides

When looking at large numbers in code (such as 1800000) it’s oftentimes difficult for the human eye to quickly see how big the number actually is. TypeScript allows us to use numeric separators to write numbers in a more human readable format (such as 1_800_000), while keeping the generated JavaScript unchanged.

Improve Readability with TypeScript Numeric Separators when working with Large Numbers

By setting the `strictPropertyInitialization` flag in the `.tsconfig` file, TypeScript will start throwing errors unless we initialize all properties of classes on construction. We’ll explore how you can fix the errors by assigning to them directly or in the constructor body. And if you can’t initialize directly but you’re sure it will be assigned to at runtime by a dependency injection library, you can use the definite assignment assertion operator to ask TypeScript to ignore that property.

Make TypeScript Class Usage Safer with Strict Property Initialization

Sometimes we might want to make a function more generic by having it accept a union of different types as an argument. Using the JavaScript “in” operator, we can test for the presence of different properties on the argument object, and TypeScript will automatically infer the exact type of our object in that block. It does this by looking at all the possible types in the union and then keeping only the ones that have that specific property defined.

Use the JavaScript “in” operator for automatic type inference in TypeScript

RxJS powered state management for Angular applications, inspired by Redux.

ngrx

Using string literal types together with switch types, we can build powerful type guarded logic flows. In this lesson, we will look at how we can take advantage of this, and build a reducer that automatically infers the action and payload type based on which switch statement case we are in.

Automatically infer TypeScript types in switch statements

Type aliases and interfaces are often used interchangeably in TypeScript, the decision for using one or the other coming down to readability/conciseness. And they do share a lot of functional similarities too: as with interfaces, types can extend other types (by the use of the intersection operator), and they can also be implemented from or extended from by a class. But they also differ in an important way: your classes can’t implement and your interfaces cannot extend a union of types.

Use Types vs. Interfaces

Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

redux

We usually think of types as something that can define a single layer of an object: with an interface we normally specify a list of a few properties and their respective types. If any one of those properties is another object we must refer again to its type. This is a finite process, as eventually we will get to a flat object, that doesn’t reference any other objects. Trees and Linked Lists are dynamic data structures, that can have infinitely many levels of depth. A type alias in TypeScript can use generics and refer to itself - this can be used to create these potentially infinitely long data structures. We will also explore using Linked Lists for building a Redux time travelling debugger.

Build self-referencing type aliases in TypeScript

Traversing items of custom data structures, like trees or linked lists, require knowledge of how that data structure is built. That can lead to problems, as faulty iteration strategies might not visit all the items, or they might not know when they've finished visiting all of them. In this lesson, we're going to look at how TypeScript supports us in building custom ES6 iterators that can be then used by a simple "for..of" loop to ensure we provide an easy to use and reliable API for other developers to traverse our data structures.

Simplify iteration of custom data structures in TypeScript with iterators

Using the optional “+” sign together with mapped type modifiers, we can create more explicit and readable type declarations. We can also use the “-” (minus) sign to remove optional declarations from properties.

Create Explicit and Readable Type Declarations with TypeScript mapped Type Modifiers

Conditional types take generics one step further and allow you to test for a specific condition, based on which the final type will be determined. We will look at how they work on a basic level and then leverage their power to allocate function types dynamically based on the type of their parameters, all without any overloads.

Dynamically Allocate Function Types with Conditional Types in TypeScript

Generics can be a useful mechanism for transforming one type into another. In this lesson we will look at how we can use them to create different types for flattening array and object types (extracting the types of their boxed values). We will then look at how we can use conditional types to create a single multi-purpose Flatten type, that can dynamically chose a flattening strategy based on the type passed into it. 

Use TypeScript conditional types to create a reusable Flatten type

When working with conditionals types, within the “extends” expression, we can use the “infer” keyword to either get the type of the elements of an array, or even to get the return type of a function. We can use this to build a “FnReturnType<T>” type, that will give us the return type of the function passed in as the generic parameter.

Infer the Return Type of a Generic Function Type Parameter

The "any" type can be very useful, especially when adding types to an existing JavaScript codebase, but it can also lead to lots of runtime errors, as it provides no type-checking. The "unknown" type on the other hand, restricts developer from calling anything on it or assigning to any other type. The only way to use "unknown" variables is to apply logic flow type narrowing or casting, as that's the only way TypeScript can trust that it's dealing with a correct type. The "unknown" type is useful when building services or APIs that can return data of an unknown shape, so we might want to stop other developers from using it in potentially dangerous ways until it's been narrowed down to a specific type.

Use the TypeScript "unknown" type to avoid runtime errors

We will look at how we can use mapped types, conditional types, self-referencing types and the “infer” keyword to create a reusable generic type that traverses down the properties of an object and marks of all them as read-only. This is especially useful when used with Redux, to ensure our whole state tree is marked as read-only and immutable.

Deeply mark all the properties of a type as read-only in TypeScript

Decorators are a powerful feature of TypeScript that allow for efficient and readable abstractions when used correctly. In this lesson we will look at how we can use decorators to initialize properties of a class to promises that will make GET requests to certain URLs. We will also look at chaining multiple decorators to create powerful and versatile abstractions.

Dynamically initialize class properties using TypeScript decorators

In this course we will look at advanced features of TypeScript and how they can be leveraged in our apps using applicable patterns and examples. In the videos that follow, you will learn how to write cleaner and more readable code that is more type safe, and you will gain access to a lot more options for creating strong & maintainable designs when building classes and services.  

Rares Matei