Home TypeScript What is Variable Type and How Variable Types Work in TypeScript?

What is Variable Type and How Variable Types Work in TypeScript?



In last tutorial I have given details on How to declare variables in TypeScript and What is the difference between Let and Var Keyword.

In this tutorial let’s see what is exactly Types In type Script and How they work?

What is Type in TypeScript and How they Work?

I am going to explain this by giving you an example, so I Am going to declare a variable called count and set it’s value to 1 and in the next line am going to try assigning a string to the same variable, let’s see what happens.

You see in the above screen that If I do that I immediately get compilation error message here telling me that “Type ‘”abc”‘ is not assignable to type ‘number'” meaning that this “abc” string is not assignable to type number, because the count variable is the type of number.

However quick note here, changing types of variable on fly is available in JavaScript but in typescript we cannot do that, it is not a good practice.

Okay so let’s take another example, Now here I am going to declare a variable whiteout initialising and then next I am going to assign different types values from the next line.

Example of declaring a variable whiteout initialising
Example of declaring a variable whiteout initialising

Here if you hover your mouse on count variable you see that the type of this is now any meaning it can store any values like number, string, boolean etc.

As you can see in the code here I am able to set all this kind values to the variable and even TypeScript is accepting, it is not showing any compilation error.

In TypeScript if you define variable without initialising of settings it’s type by default it will set to any

So What is the solution to this?

If you don’t know value of the variable ahead of the time that’s when we use Type annotation.

Use type annotation

First do you know what is type annotation in TypeScript?

Type annotation is basically is way of defining type of a particular variable before using it.Very Simple Right?

So let’s fix the above problem using type annotation, see below example:

Use type annotation In TypeScript
Use type annotation In TypeScript

So here I am setting the type of count variable to number using colon.

And you see that on the fourth and fifth line we have got compilation error.


So what is the take away here is alway define a variable type in TypeScript, in that way typescript will show compilation error if we are going to mess with the variable type in further script, it helps to avoid issues in the application.

Enjoy this tutorial? Get iTech Empires updates delivered straight to your inbox.

No Spam, ever. We'll never share your email address and you can opt out at any time.

Yogesh Kolihttp://www.itechempires.com
Yogesh Koli is a software engineer & Blogger lives in India. He's driven by an addiction to learning and a love for adventure. he has 6+ years of experience working with the front-end and back-end web application development.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Notify of

Tutorials You May Like!

- Advertisement -