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?
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.
You can think of as like an operator (left associative):
((window as unknown) as Record<string, unknown>)['ResizeObserver']
So here, it casts window to unknown which is valid. It's upcasting from the type of window to unknown.
Then we downcast from unknown to Record<string, unknown>, which is also perfectly valid.
But if we do only window as Record<string, unknown>, we get an error. Window does not have anything in common with Record<string, unknown>!
Here's an extra example of as to demonstrate that it's just a simple operator:
42 as number as number as number
(((42 as number) as number) as number)
You can think of it like this:
VALID
unknown
^ \
/ \
Window / > Record<string, unknown>
INVALID
Window ------> Record<string, unknown>
