Multiple type assertions in TypeScript

Question

I was looking at the source code of an Angular repository and stumbled upon a line of code that uses multiple type assertions.

The code looks like this one, it uses 2 type assertion: unknown and Record<string, unknown>:

 (window as unknown as Record<string, unknown>)['ResizeObserver'] 

What does multiple assertions actually mean?

Answer 1

You use type assertions too narrow down the type of a value so you can use it. This is known as double assertion.

The assertion from type S to T succeeds if either S is a subtype of T or T is a subtype of S.

Since we are unsure of the shape of the window object we cannot be sure that we can check that the ResizeObserver property has a value other than null.

So we can cast it to unknown, because anything can be assigned to unknown.

And because anything can be assigned to unknown we now have free range to shape the object how we want in order to satisfy our conditional. Since we need to check that a properties value is not null, we can simply use Record<string, unknown>

We end up with:

(window as unknown as Record<string, unknown>)['ResizeObserver'] != null

By doing this we can write a conditional to check that the ResizeObserver property is not null no matter what shape the window object has.