Variables in Typescript
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 keyword which you have seen in JavaScript
function doSomething() {
for(var i = 0; i < 5; i++) {
console.log(i)
}
console.log('Finally' + i)
}
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 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 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.
function doSomething() {
for(let i = 0; i < 5; i++) {
console.log(i)
}
console.log('Finally' + i)
}
$tsc main.ts
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 keyword. 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 keyword, is the scope to the nearest function. So in this case the nearest function is do Something, 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 keyword.
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 keyword. So, that’s why our compile code now.
uses the var keyword, 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.