CODEWITHSUNDEEP
angulartypescript
The.Wolfgang.Grimmer
The.Wolfgang.Grimmer

Reputation: 1351

Multiple type assertions in TypeScript

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?

Upvotes: 6

Views: 2898

Answers (2)

about14sheep
about14sheep

Reputation: 2019

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.

Upvotes: 9

tenshi
tenshi

Reputation: 26374

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>

Upvotes: 8

Related Questions