How to use Type Assertions in TypeScript? Need of using type Assertions

Introduction:

In this tutorial I will give you details on the concept of type Assertions in typescript, basically I am going to give you in-dept details on hot to use type assertions in typescript.

Also Read – What is Variable Type and How Variable Types Work in TypeScript?

First let me show you need of using type assertions in typescript:

What is the need of using type assertions in typescript?

Let me give you an example to explain the need of type assertions in typescript, here in first example I am going to declare a message variable with the default value and then will see what are IntelliSense we get in our code editor.

Example:

let message = 'xyz';

let endswithZ = message.endsWith('z');

If you see while writing the above code, code editor gave a beautiful IntelliSense with tooltip and it clearly shows me how many number methods and functions I have to work with this message variable.

And this is coming because I have defined the value of a variable strings and typescript compiler takes note of this and sets the variable type to string.

However sometimes typescript compiler get little bit confuse about the type of a variable, if have not set the type of the variable while declaring.

For example, like showing below:

let message;

message = 'xyz';

let endswithZ = message.endsWith('z');

Now if you notice, I have declare the value of the variable after declaring it so typescript decided variable type to any.

And that is the reason I am not getting any IntelliSense to the message variable.

Because the methods and functions we get in the first example here in the top are because those methods are related to string variable and this second example typescript is not sure about it’s type so it is setting it to any and then eventually as the end result we are not getting any IntelliSense.

So what should we do to get IntelliSense back? so in this case we needs to explicitly tell typescript compiler about this variable type that this message variable is actually string and this what we called type assertions.

How to add type Assertions in typescript?

In typescript there are two way of doing type assertions, one way is to prefix variable with angle bracket with the type you want to add and enclose both parts in parentheses.

First way of Adding Type Assertions:

So here is how we can add type assertions using angle brackets:

let message;

message = 'xyz';

let endswithZ = (<string>message).endsWith('z');

Now if you see in the above screen, as soon as I added type assertions I am getting those IntelliSense tooltip back again with all the methods and functions available on string objects.

Second Way of Adding type Assertions

So there is also an another to do of Type Assertions in TypeScript, that is instead of angle brackets we use parentheses with as keyword like showing below:

let message;

message = 'xyz';

let endswithZ = (message as string).endsWith('z');

Note that in the above script I am still getting all those IntelliSense tooltip with the Alternative way of adding type Assertions.

Conclusion

There are two ways available of doing type assertions in typescript.

Both way of doing type assertions are the exactly the same, which one to use is purely is your personal preference but the first approach is what you see more in lot of tutorials and codebases online.

One quick important note, type assertions does not change the type of the variable at run time, in fact it is not going to restructure the object in memory it is purely a way to tell typescript compiler about the type of particular variable so we can access IntelliSense.