Declaring Variables

Mosh Hamedani
A free video tutorial from Mosh Hamedani
Passionate Software Engineer and Best-selling Author
4.5 instructor rating • 20 courses • 412,412 students

Learn more from the full course

Angular Crash Course for Busy Developers

Have limited time to learn Angular 4 (Angular 2+)? Take this course and learn Angular in 10 hours!

10:17:00 of on-demand video • Updated April 2018

  • Master the essential Angular concepts
  • Troubleshoot common runtime errors
  • Write cleaner, more maintainable code
English Alright, let's explore TypeScript by looking at Variable Declarations. So in TypeScript, there are two ways to declare a variable. We can use the var keyboard which you have seen in JavaScript, like var number, reset it to 1. Or, we can use the let keyword. So, let, count, 3, 2. Now, before I explain the difference, I need to clarify that the let keyword is also being added to the JavaScript, so JavaScript has a few different versions. We have ES5, or ECMAScript 5, which is the version of JavaScript supported by pretty much all browsers out there, it's been around for a long time. Now we have ES6, which is a newer version, and it was introduced in year 2015, and from that point the ECMAScript team, which is the team extending JavaScript decided to use the year number, instead of the version number. So, we have ECMAScript 2015, 2016, and 2017. Now with ECMAScript 2015, which is basically ES6, you also have this let keyword. But, in case you are not familiar with it, let me explain how it works. So, I'm going to define a function. Let's call it do Something. It doesn't really matter. But here I'm going to define a for block, so var we said i to 0, and as long as i is less than five, let's increment it, here we have a block and then log it on the console. Now, finally at the end of this function, I'm going to log this i one more time. But with the label Finally. Then I'm going to call this function here. So, in the terminal I'm going to compile this file, main.ts, and also at the same time, run it with node, main.ts, Note that the value of i at the end is 5. So this is the issue we have when declaring a variable using the var keyboard. So we have declared i here, inside this for block, but it's also meaningful and available, outside the for block. Now if you have worked with languages like C Sharp, or Java, you know that we don't have these concepts, and those languages. In JavaScript, a variable declared with a var keyboard, is the scope to the nearest function. So in this case the nearest function is doSomething, so once we declare i inside this for block, it's available anywhere in this function. Now let's see what happens when we declare this variable using the let keyboard. So, let. Now look, we immediately got a red underline here which indicates a compilation error. And this is one of the beauties of TypeScript. When you are writing TypeScript code, you can catch these errors at compile time, before you run your application, before you deploy it. Now this hover or mouse here, so this is the error, can not find main, i. So now i is scope to the nearest log. instead of nearest function, and this is the proper way to declare variables which prevents a lot of issues later down the road. Now, I want to clarify something. I'm going to save this file, back in the terminal, first I'm going to remove main. js. Now, I'm going to recompile our main.ts, okay, we got our error here, can not find name 'i'. However, if you look at the files in this folder, we do have main.js, so even though we have a compilation error, the TypeScript compiler still generated main. js. Let's have a look at the content of this file. So this is the code that is generated. So by default, TypeScript Compiler compiles our TypeScript code to ES5, or ECMA Script 5, which is the older version of JavaScript that is supported by all browsers out there. Now there, we don't have the let keyboard. So, that's why our compile code now uses the var keyboard, and this is perfectly valid JavaScript code. So, I can go in the terminal, and simply run this code and get the same output as before. So, what I want to clarify here, is that TypeScript Compiler reports these errors, but still generates valid JavaScript code. So here's the takeaway for this lecture: from now on, anywhere we want to declare a variable, we use the let keyboard. Once again, this does not stop the compilation step, but at least we can catch the issues earlier during the compile time. Next, we're going to look at different types we have in TypeScript.