How to Declare Variables in TypeScript?

Introduction:

In this tutorial I am going to give you answer on two very basic question from type script that is how to declare a variable in TypeScript? and what is the difference between let and var Keyword and as a bonus what are the advantages and good practices of using Variable in TypeScript.

Declaring Variables

In TypeScript there are two ways of declaring a variable, we can use the var keyword which you may already have seen in the JavaScript.

For Example:

main.ts

var number = 1;

Or we can use the let keyword for example:

main.ts

let number = 1;

Important Note on JavaScript Versions:

So quick important note before giving your explanation and difference between var and let keyword.

That is the let keyword is also being added to the latest JavaScript version, JavaScript has few different version.

• ES5 (ECMAScript5) : This is supported by pretty much all browsers out there, it’s been around for long time
• ES6 (2015) : This is a newer version and it was introduced in year 2015.
  From this point The ECMAScript which is the team extend in Javascript decided to use Year number instead of the version number, so next we have
• ES2016
• ES2017
• ES2018
• ES2019

Now in ECMAScript 2015 which basically ES6 we also have the let keyword.

How let and var Keyword Works in TypeScript

Issue with the var Keyword

So let’s define an example function of showing an issue with var keyword first and then you will see the difference, when we will write the same function with the let keyword.

So go ahead and create new folder and create new files called main.ts

Next write following function using var keyword:

main.ts

 function test() {
  for (var i = 0; i < 5; i++) {
    console.log(i);
  }

  console.log('Final Value of i: ' + i);
}

// call test function
test();

Now open up the terminal and use following command to compile above program using typescript compiler and then next run it using node.

tsc main.ts
node main.js

if you note that the value of the i at the end is 5, basically i variable outside of it’s scope, so we have declared the i variable here inside the ”for” block but it is also meaningful and available outside the for block.

If you have worked with languages like Java or C#, you know that we don’t have this concept in those languages .

In JavaScript Variable declared with the var keyword is scoped to the nearest function, here in this case nearest function is test() so once we declare i inside the for block it is available anywhere in test function.

So this is the issue we have when declaring a variable using the var keyword.

Solve var keyword issue by replacing it with let keyword

Note let’s see what happens when we declare this i variable using the let keyword.

main.ts

function test() {
  for (let i = 0; i < 5; i++) {
    console.log(i);
  }

  console.log('Final Value of i: ' + i);
}

//call test function
test();

Now you can notice we immediately got red underline here which indicates compilation error and this is one of great advantage of using typescript.

When you write typescript code you can catch this error at compile time before you run your application or before your deploy it on production.

You can see that if you hover your mouse on i variable where it shows underline, you can see it show error message, cannot find name ‘i’.

Basically what’s happed is i variable is scoped nears block instead of nearest function and this is the proper way to declare variables which prevents lot of issues later when we proceed with our application.

One quick important note here, but yes don’t get confuse by reading this note it just for you knowledge, keep using let instead of var:

So if you open your terminal and compile the above code along with compilation error, you will see that typescript show compilation error on script with error message.

However if you look at the files we do have main.js file so even we have compilation error, The TypeScript compiler still generate the JavaScript code.

Let’s have look at the content of main.js file here:

main.js

function test() {
    for (var i = 0; i < 5; i++) {
        console.log(i);
    }
    console.log('Final Value of i: ' + i);
}
//call test function
test();

So by default typescript compiler compiles our typescript code to ES5 or ECMAScript5 which is the older version of JavaScript that is supported by all browsers, in ES5 we don’t the let keyword we have let keyword in latest version of Javascript that’s why typescript compiler compiles typescript code to ES5 by default. and that is the reason see var keyword.

Conclusion

So to conclude this tutorial that from now anywhere in the typescript you want to declare a variable make to sure to use let keyword instead of var keyword, this will help you to catch issue earlier during the compile time.

What’s Next?

So you have learned is what is variable and how to use it next let’s see What is Variable Type and How Variable Types Work in TypeScript? this is going to important so make sure your read this tutorial.

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