Categories: TypeScript

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

Introduction

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.

let count = 1;
count = 'abc';

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.

let count;

count = 1;
count = 'abc';
count = true;
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:

let count: number;

count = 1;
count = 'abc';
count = true;
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.

Conclusion

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.

Yogesh Koli

Software engineer & Blogger live in India, has 8+ years of experience working with the Front-end and Back-end Web Application Development.

Recent Posts

Complete guide of using Laravel 6 Eloquent Subquery Enhancements

Learn How to use laravel frameworks new improved feature called Eloquent Subquery and get example…

1 year ago

3 Useful examples of using Array Map function in PHP – Best Practices

Learn how to use php array map function with easy and essential tutorial to modify…

1 year ago

Working with PHP Array Filter Function – Best Practices

Learn how to use php array filter function with easy and essential tutorial to filter…

1 year ago

How to add Access Modifiers with Constructor Parameters in TypeScript

Want to know how to refactor your Typescript class, Learn here utilising Typescript of the…

1 year ago

What is Access Modifiers and how to use Access Modifiers in TypeScript ?

What is Access Modifiers in typescript, how to use Access Modifiers, when to use them,…

1 year ago

Top 10 Super Useful Packages to Improve Laravel applications in 2019

This tutorial provide ultimate list of package those are top 10 on packagist and super…

1 year ago