Satisfying TypeScript 4.9 – Frontend Weekly vol. 107

1. TypeScript 4.9 Beta

If you’ve been following our reports for some time, you probably know what my enthusiasm is like when it comes to new versions of TypeScript. The language has matured a lot and the new features introduced are rather small and not interesting. So when I saw the TypeScript 4.9 beta, I didn’t expect anything special. Oh, how wrong I was! TypeScript 4.9 for the first time in a long time introduces a novelty to the syntax of the language: the satisfies operator.

To explain how this new operator works I will use an example from a Microsoft beta note. Suppose we need to add types the following code:

// Each property can be a string or an RGB tuple.
const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
};

// We want to be able to use array methods on 'red'...
const redComponent = palette.red.at(0);

// or string methods on 'green'...
const greenNormalized = palette.green.toUpperCase();

The first thing that may come to mind is defining the Color type and using the Record Utility Type. Unfortunately, if we want the code to compile we are forced to perform a dangerous cast operation:

type Color = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];

type Palette = Record<Color, string | RGB>

const palette: Palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
};

// We want to be able to use array methods on 'red'...
const redComponent = (palette.red as RGB).at(0);

// or string methods on 'green'...
const greenNormalized = (palette.green as string).toUpperCase();

To remove casting, in the type definition we can explicitly define how each color will be initialised. In our case, this may not be the worst idea, but see for yourself how much additional code we have to generate. Not to mention much less flexibility we get at the end…

type StringColor =  "green";
type RGBColor = "red" | "blue";
type RGB = [red: number, green: number, blue: number];

type StringColorPalette = Record<StringColor, string>;
type RGBColorPalette = Record<RGBColor, RGB>;
type Palette = StringColorPalette & RGBColorPalette;

const palette: Palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
};

const redComponent = palette.red.at(0);
const greenNormalized = palette.green.toUpperCase();

A workaround for this problem is a new satisfies operator that will validate the type at the time of assignment, but will not affect the type being evaluated by TypeScript. It sounds complicated, but a simple example gives a good idea of what is involve

type Color = "red" | "green" | "blue";
type RGB = [red: number, green: number, blue: number];

type Palette = Record<Color, string | RGB>

const palette = {
    red: [255, 0, 0],
    green: "#00ff00",
    blue: [0, 0, 255]
} satisfies Palette;

// Both of these methods are still accessible!
const redComponent = palette.red.at(0);
const greenNormalized = palette.green.toUpperCase();

// —-----------------------------------
// Example errors caught by satisfies
//  —-----------------------------------

const spelloPalette = {
    red: [255, 0, 0],
    green: "#00ff00",
    bleu: [0, 0, 255] // Such typos are now caught
} satisfies Palette;

// Missing properties are now caught
const missingColorPalette = {
    red: [255, 0, 0],
    bleu: [0, 0, 255]
} satisfies Palette;

const wrongColorTypePalette = {
    red: [255, 0], // Such typos are now also caught
    green: "#00ff00",
    bleu: [0, 0, 255]
} satisfies Palette;

Of course, that’s not the end of what’s heading into TypeScript 4.9. Although, the rest of the list more typical TypeScript minor improvements like better type narrowing using the in operator or returning errors on direct comparisons with NaN objects. If you’re hungry for details, as usual, the note provided by Microsoft is the place to go (see sources).

For now, TypeScript 4.9 has received its first beta version. Looking at its release cycle we can expect a stable version around November. We are also keeping our fingers crossed that the new operator will survive until then. On the occasion of previous versions of the language there have been features that did not survive this path.

Sources

https://devblogs.microsoft.com/typescript/announcing-typescript-4-8-beta/

Discover more IT content selected for you

In Vived, you will find articles handpicked by devs. Download the app and read the good stuff!

2. Web Almanach 2022

Web Almanac, along with StackoOverflow Survey and The State of JS, are the most important reports for drawing conclusions about our frontend world. Web Almanac is distinguished from the others by the fact that instead of relying on developers’ opinions, it is based on hard data collected by scraping the Internet. Also unlike the others, it can’t be read in its entirety in one sitting over morning coffee.

I would be lying if I said that I already had time to wade through the report from breath to breath. The only thing I had enough time for was a cursory review of the chapters that interested me the most. However, I managed to get through Stefan Judis’ twitter thread, which accumulated a whole bunch of interesting facts. As an incentive, you’ll find some of them below:

• The largest stylesheet scrapped was 62MB (!)
• More than 70% of sites still use pixels to define font sizes
• The least popular color in CSS files is `mediumspringgreen`
• The median number of scripts downloaded by an application is 20
• jquery is still the king of the web (81% of sites use it). If React ever wants to take its place, it has a long way to go (currently 8% of sites use it)
• Only 2% of desktop apps use custom elements.

Below you will find the whole thread. I really recommend reading it if you don’t have time to go through the whole report.

Sources

https://almanac.httparchive.org/en/2022/

Discover more IT content selected for you

In Vived, you will find articles handpicked by devs. Download the app and read the good stuff!

Bonus: The new wave of frontend frameworks

If you regularly follow our reviews, then you are certainly up to date with news such as Remix, Astro and Qwik. However, sometimes it’s worth stopping for a moment and reflecting on where we’re coming from and where we’re going. The frontendmastery blog authors did exactly that and they created the thesis that a new era of frontend frameworks is about to begin. If you’re looking for a light read just in time for a Friday evening (a little lighter than Web Almanac 2022), you need look no further.

Sources

https://frontendmastery.com/posts/the-new-wave-of-javascript-web-frameworks/

PS: Next week’s Frontend Weekly is canceled, due to my vacation. If you’re afraid for your well-being due to the lack of frontend news, you’ll find a pretty good dose of them in the Vived App (unfortunetelly without my moderately observations and moderately amusing commentary 😉)