DEV Community: Zsolt Gomori

Exploring TypeScript - Const Assertions

Zsolt Gomori — Sun, 09 May 2021 12:16:39 +0000

This article was originally published at zsgomori.dev. Head over there if you like this post and want to read others like it!

The const assertion was released with TypeScript 3.4. It's a special type of type assertion in the sense that the const keyword is used in place of the type.

By definition, the const assertion has the following effects:

Literal types will not be widened.
Object literals will get readonly properties.
Array literals will become readonly tuples.

Here's an example:

let foo = "foo" as const;
// => yields type "foo"

Notice that TypeScript infers the most specific type possible (string literal type in this case) although we used the let keyword in front of the foo variable declaration. Therefore, assigning a new value to it incurs a type error:

foo = "bar";
// => Type '"bar"' is not assignable to type '"foo"'.

In contrast, if we removed the as const assertion, its type would be widened to string:

let foo = "foo";
// => yields type "string"

foo = "bar";
// => OK

Practical Use-Case

The const assertion comes particularly in handy when mixing with object literals. Imagine a function designed to obtain some sort of data from the backend:

function fetchData(mode: "CREATE" | "EDIT") {
  // the function's body is deliberately omitted for the sake of brevity
}

It has merely a single parameter, mode — it's a union of string literal types, which can be either of type "CREATE" or "EDIT".

In such cases, it's a common practice to declare an enum-style mapping object and pass one of its properties on to the function, instead of having to juggle with brittle, raw texts:

const MODE = {
  CREATE: "CREATE",
  EDIT: "EDIT"
};

fetchData(MODE.CREATE);

Interestingly enough, the TS compiler will yell at us with a red squiggle saying that Argument of type 'string' is not assignable to parameter of type '"CREATE" | "EDIT"'.. If we hover over MODE.CREATE we will discover that it's indeed of type string. You might be wondering, why does it happen?

Generally speaking, objects are mutable constructions in JS — that is, we can freely assign a new value to any of its properties even if the object is initialised with the const keyword:

MODE.CREATE = "create";
// => OK

If TS inferred string literal types, we would not be able to override the properties. Instead, it widens their types to string. const assertion to the rescue!

const MODE = {
  CREATE: "CREATE",
  EDIT: "EDIT"
} as const;

It's equivalent to:

const MODE: {
  readonly CREATE: "CREATE";
  readonly EDIT: "EDIT";
} = {
  CREATE: "CREATE",
  EDIT: "EDIT"
};

With that in place, the error goes away because we conform to what TypeScript expects -- a string of type "CREATE".

Deriving Union String Literal Type

You may have noticed that there's a correlation between the mode function parameter and MODE enum-like object. For instance, when it comes to extending the possible set of modes, both of them have to be touched.

Despite the fact that in this particular case it's not a huge deal, still it's a maintenance burden we would like to avoid at all costs.

Wouldn't it be neat if we could get around it by deriving the components of mode union string literal type from the MODE object? Turned out, we can!

type Mode = keyof typeof MODE;

Let's break it down. At type-level, the typeof type operator returns the type of a variable or property.

const MODE = {
  CREATE: "CREATE",
  EDIT: "EDIT"
} as const;

type Mode = typeof MODE;

// yields 👇

type Mode = {
  readonly CREATE: "CREATE";
  readonly EDIT: "EDIT";
};

The keyof type operator, on the other hand, expects an object type and returns a string or numeric literal union of its keys:

type Point = keyof { x: number, y: number };

// => yields 👇

type Point = "x" | "y";

And that's pretty much it! From now on, no matter what changes we make on MODE, the constituents of Mode union string literal type will always match its keys.

const MODE = {
  CREATE: "CREATE",
  EDIT: "EDIT",
  DELETE: "DELETE"
} as const;

type Mode = keyof typeof MODE;
// => type Mode = "CREATE" | "EDIT" | "DELETE"

function fetchData(mode: Mode) {
  // ...
}

Caveat: the order of keyof and typeof does matter — in fact, it wouldn't even work the other way around. The reason behind it is that keyof operates only on types.

Conclusion

In this article, we learnt about const assertions in the context of typing enum-style mapping objects. Speaking of enums, we could have achieved identical results by using the built-in enum construct. That said, many folks frown on it because it hasn't made its way to the JavaScript standard feature set. As far as I'm concerned, choose whatever floats your boat.

How to Cache Fonts on Netlify?

Zsolt Gomori — Tue, 30 Mar 2021 08:32:05 +0000

This article was originally published at zsgomori.dev. Head over there if you like this post and want to read others like it!

Font optimisation techniques, such as pre-loading, not only can contribute to more efficient Core Web Vitals scores, but also can help prevent your visitors from experiencing FOUT and FOIT. Our today’s topic will focus on HTTP Cache and how to utilise it to cache self-hosted fonts on Netlify.

We will start off with a brief brush up on how HTTP Cache works and what doors it unlocks. Then, I’ll walk you through the steps I followed to cache my fonts on this website.

TL;DR

For those of you who want to cut to the chase, copy-paste the snippet into your netlify.toml configuration file:

[[headers]]
  for = "/fonts/*"
  [headers.values]
    cache-control = '''
    max-age=365000000,
    public
    immutable'''

You may need to vary either the route or the cache-control values — or even both! - to suit your particular needs.

How Does HTTP Cache Work?

When the browser encounters a request to an asset while parsing your HTML's metadata, it checks whether there’s already a valid cache response in its cache, before reaching out to the web server.
If there’s no cache that would fulfill the request or the cache is stale, the request gets forwarded to the web server.
The web server processes the request and acts accordingly — it sends the requested asset back over the wire. Besides, if configured, it augments the response headers with Cache-Control to specify the directives for caching mechanisms (for example, for how long the cache will be considered fresh).

In a nutshell, that’s it. One of the major benefits of caching is that on subsequent requests to the same asset, the browser does not need to carry out the transmission of the request towards the server over and over again.

Instead, so long as the cached response’s lifetime has not expired yet, the browser will intercept the request and reuse the previously cached response to fulfill it. Consequently, we are gaining on speed by reducing the roundtrips between the browser and the server.

Explaining the ins and outs of the HTTP Cache flow, making sure of cache freshness with ETag and Last-Modified in particular, is beyond the scope of this article. If you’re looking for an in-depth explanation, consult with the MDN docs.

Caching Fonts on Netlify

We have already touched on the configuration part — it’s as straightforward as adding an additional header to outgoing responses. When it comes to Netlify, hooking into and altering their default caching behaviour is literally a piece-of-cake-task.

It should be fairly straightforward even if you use a different platform (e.g. Vercel) or run your web server on your own.

For the sake of completeness, here’s the exact same snippet from the TL;DR section:

[[headers]]
  for = "/fonts/*"
  [headers.values]
    cache-control = '''
    max-age=365000000,
    public
    immutable'''

In addition to the file-based configuration approach, you can also define caching policies in the _headers file.

If TOML is somewhat confusing, the JSON equivalent may help better grasp what's going on:

{
  headers: [
    {
      for: "/fonts/*",
      values: {
        "cache-control": "max-age=365000000,public,immutable"
      }
    }
  ]
}

Let me briefly expand upon what’s happening here.

The for keyword declares the path or URL which the headers will be added to. In my case, I self-host my fonts and they live inside the static/fonts folder, which ultimately will be exposed via the /fonts route. Therefore, the following link pointing to the Poppins font on my site will match the /fonts/* pattern:

<link
  rel="preload"
  href="/fonts/Poppins-Regular.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>

Onto the values keyword. As the name suggests, here you can tie the header values up to the route it’s grouped under. The max-age=<seconds> directive dictates the lifetime of a resource, that is, the maximum amount of time a resource is considered fresh. Given that the fonts on my site are quite unlikely to change in the foreseeable future, I store them for more than a year.

You can learn more about the available set of directives on MDN.

And that's a wrap, folks!

Thanks for reading the article! I genuinely hope you learned something new! Feel free to leave a comment or hit me up on Twitter with any questions.

An Overview of Map and Set in JavaScript

Zsolt Gomori — Sun, 12 Jul 2020 17:13:58 +0000

Looking for comparisons? Refer to the articles below:

Map

Creating an instance

1) Using the constructor:

const colors = new Map();

2) Passing an iterable:

const colors = new Map([
  ["#ff0000", "red"],
  ["#0000ff", "blue"]
]);

// => colors: {"#ff0000" => "red", "#0000ff" => "blue"}

3) Using the set() method which is chainable:

const colors = new Map()
  .set("#ff0000", "red")
  .set("#0000ff", "blue");

// => colors: {"#ff0000" => "red", "#0000ff" => "blue"}

Methods

1) Reading and writing:

const colors = new Map([
  ["#ff0000", "red"]
]);

colors.get("#ff0000");
// => "red"

colors.get("#0000ff");
// => undefined

Writing has already been covered, though, but for the sake of completeness:

const colors = new Map();

colors.set("#0000ff", "blue");
// colors: {"#0000ff" => "blue"}

2) Checking if the entry with the given key exists:

const colors = new Map().set("#ff0000", "red");

colors.has("#ff0000");
// => true

3) Getting the keys and values:

const colors = new Map().set("#ff0000", "red");

for (const hex of colors.keys()) {
  console.log(hex);
}

// => "#ff0000"

for (const color of colors.values()) {
  console.log(color);
}

// => "red"

for (const [hex, color] of colors.entries()) {
  console.log(hex, "=>", color);
}

// => "#ff0000 => red"

4) Removing a single entry:

The delete() method returns a boolean according to the operation's result.

const colors = new Map().set("#ff0000", "red");

colors.delete("#ff0000");
// => true

colors.delete("foo");
// => false

5) Removing all entries:

const colors = new Map().set("#ff0000", "red");

colors.clear();
// => colors: {}

Properties

When it comes to retrieving the size of a map (that is, the number of entries it has), it's more convenient than that of an object:

const colors = new Map([
  ["#ff0000", "red"]
]);

console.log(colors.size);
// => 1

colors.set("#0000ff", "blue");

console.log(colors.size);
// => 2

Tips & Tricks

1) Converting between Maps and Objects

The conversion is possible so long as the map consists of keys of types of strings and symbols.

const colors = new Map([
  ["#ff0000", "red"]
]);

const obj = Object.fromEntries(colors);
// => obj: {"#ff0000": "red"}

2) Mapping and filtering

Steps:

Convert the Map to an Array.
Filter or map the array.
Convert the result back to a Map.

const numbers = new Map([
  [1, "a"],
  [2, "b"],
  [3, "c"]
]);

const mappedNumbers = new Map( // 3
  [...numbers] // 1
    .map( // 2
      ([number, char]) => [number * 10, char]
    )
);
// => mappedNumbers: {10 => "a", 20 => "b", 30 => "c"}

const numbers = new Map([
  [1, "a"],
  [2, "b"],
  [3, "c"]
]);

const filteredNumbers = new Map( // 3
  [...numbers] // 1
    .filter( // 2
      ([number]) => number > 2
    )
);
// => filteredNumbers: {3 => "c"}

3) Key equality is based on sameValueZero

NaN keys are considered to be equal:

const map = new Map();

map.set(NaN, "foo");
map.get(NaN);
// => "foo"

map.set(NaN, "bar");
map.get(NaN);
// => "bar"

But object keys are always different:

const map = new Map().set({}, "foo").set({}, "bar");

console.log(map.size);
// => 2

Set

Creating an instance

1) Using the constructor:

const set = new Set();

2) Passing an iterable:

const numbers = new Set([1, 2, 3]);
// => numbers: {1, 2, 3}

const chars = new Set("123");
// => chars: {"1", "2", "3"}

3) Using the add() method which, similarly to set(), is chainable:

const numbers = new Set()
  .add(1)
  .add(2)
  .add(3);
// => numbers: {1, 2, 3}

Methods

1) Reading and writing values:

Keep in mind the caveat that there's no random access to an element in a Set (citing from ES6 — Set vs Array — What and when?):

More important, because the Array data is stored in consecutive memory, the CPU will be able to access the data much faster due to pre-fetching. Hence in general accessing an elements in Array (one after the other such as in a for loop) is quicker and more efficient if you compared to other type of abstract data types.

There are workarounds to locate specific elements though. For instance, to get the first element of a set you can grab an iterator from values() and then call the next() method (original solution from StackOverflow):

const numbers = new Set()
  .add(1)
  .add(2)
  .add(3);

const firstElement = numbers.values().next().value;
// => firstElement: 1

2) Checking if an element is a member of the collection:

const numbers = new Set()
  .add(1)
  .add(2)
  .add(3);

numbers.has(1);
// => true

numbers.has(4);
// => false

3) Removing a single element:

Just like the delete() method of Map, the returned boolean value indicates if the operation was successful:

const numbers = new Set()
  .add(1)
  .add(2)
  .add(3);

numbers.delete(1);
// => true

numbers.delete(4);
// => false

4) Removing all elements:

const numbers = new Set()
  .add(1)
  .add(2)
  .add(3);

numbers.clear();
// => numbers: {}

Properties

const numbers = new Set()
  .add(1)
  .add(2)
  .add(3);

console.log(numbers.size);
// => 3

Tips & Tricks

1) Removing duplicated elements from an Array:

const arr = [1, 1, 2, 3, 4, 4, 5];

const filteredArr = [...new Set(arr)];
// => filteredArr: [1, 2, 3, 4, 5]

2) Iteration:

const numbers = new Set()
  .add(1)
  .add(2)
  .add(3);

for (const number of numbers) {
  console.log(number);
}
// => 1
// => 2
// => 3

3) As with Map keys, NaN elements are considered to be equal:

const nanSet = new Set([NaN, NaN, NaN, NaN]);

console.log(nanSet.size);
// => 1

But objects are always different:

const objSet = new Set([{}, {}, {}]);

console.log(objSet.size);
// => 3

4) Mapping and filtering

const numbers = new Set()
  .add(1)
  .add(2)
  .add(3);

const mappedNumbers = new Set([...numbers].map(number => number * 2));
// => mappedNumbers: {2, 4, 6}

const numbers = new Set()
  .add(1)
  .add(2)
  .add(3);

const filteredNumbers = new Set([...numbers].filter(number => number > 2));
// => filteredNumbers: {3}

5) Union

const a = new Set(["foo", "bar"]);
const b = new Set(["foo", "buzz"]);

const union = new Set([...a, ...b]);
// => union: {"foo", "bar", "buzz"}

6) Intersection

const a = new Set(["foo", "bar"]);
const b = new Set(["foo", "buzz"]);

const intersection = new Set([...a].filter(val => b.has(val)));
// => intersection: {"foo"}

7) Difference

const a = new Set(["foo", "bar"]);
const b = new Set(["foo", "buzz"]);

const difference = new Set([...a].filter(val => !b.has(val)));
// => difference: {"bar"}

I hope you found the article helpful! Until next time!

Psst. Would you like to add something? I'd like to hear about it. Just leave a comment or drop me a message on Twitter.