How to Use Variables in TypeScript
This guide walks through how to use variables in TypeScript, specifically we examine how to work with the: var, let, and const variable types and how they each have a specific role in development.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

In this guide we're going to get into how to use variables in typescript. There are three types of variables that we're going to be able to use and I'm going to walk through each one of them and then afterwards I'm going to show you what some of the differences are.

Variable Types

So the three types are var, let, and const. Var and let are very similar if you are used to JavaScript programming then var is probably one of the ones that you're most used to. However in the last few years let has also become popular and there's a pretty subtle difference but it is an important difference to know when working with these two and I’ll go into an example of how they're different shortly. But first to declare variables in typescript you simply type in whatever type of variable you're doing such as var. Then you give the name so say fullName and an important thing with typescript is to make sure that you're using camel case. So if you were coming from the Ruby language or something like that this variable would probably look like this because Ruby uses snake case. However in typescript in JavaScript you want to follow the style guide in the style guide for these is to use camel case just like this. So I'm going to declare the name then give a colon. Followed by that data type.

VAR

So I'm going to make a full name, which is of the string data type, and inside of this I'm going to pass a string so I pass in my name and then a semi colon at the very end.

var fullName : string = “Jordan Hudgens”;

LET

With let, it's the exact same thing. So I'm going to say pretending this is an e-commerce program or something I say pay to count. And the data type for this one is going to be a boolean and then I'm going to say that it is true.

let paidAccount : Boolean = true;

CONST

Now const is short for constant which means that this is a value that you're placing in declaring the inside of your program and you're letting JavaScript know that you do not want this value to be changed. Pretty much every language has a constant variable type. However they get treated differently. For example in Ruby you can actually change your constants. It's considered a bad practice but because we're be so flexible it will let you do that. Typescript is not that flexible in. You'll see in a second what happens when I try to change a constant value. So for this one I'm going to say version number is set this equal to the data type of number and let's get this equal to 1.3. 

const versionNumber : number = 1.3;

Now as you notice as I was typing typescript and really sublime text was constantly giving me underlines on when I had a syntax error or anything like that which is very nice and handy. So now I just want to create some console log statements. So I’m just going to say console log and I'm going to put in these values as a full name. Paid account and then version number.

console.log(fullName);
console.log(paidAccount);
console.log(versionNumber);

Now I'm not going to walk through this on in every single video because I'd probably get monotonous. However make sure that you change your tsconfig.json file because it's only going to run the files that you have listed here. So before the video I changed to the file so that's calling these 006_variables.ts file you can have it call any of the ones that you have. But before I had it running the 005 file and anything that you want to run make sure that you include it here in the array. Now I've saved the file and if I switch to the terminal I have to type in tsc to compile everything to JavaScript. And after I've done that by type ls –a this is going to show me all the files and you can see that we have now our 006_variables, JavaScript file, and a map file. So now I just have to type in node 006_variables and if I hit run you can see that this all worked perfectly. So that's good.

So now that you know how to create variables let's actually get into what makes them different because each one of these is a little bit different in some form or another. So I'm going to come down here and I'm going to redefine each one of these. So I'm going to say full name and set it equal to “Tiffany Hudgens”

fullName = “Tiffany Hudgens”;

And then create these ones as well so I'll say paidAccount and it is a Boolean which is a reason why it's giving me this error so I’m going to change this to false.

paidAccount = false;

Then versionNumber here I’ll change to 1.4 

versionNumber = 1.4;

Now I can't even run this program. And the reason why is because I am trying to redefine a constant. I'm trying to reset a constant. And if I click on where it's shown me have a syntax error you can see where it says down on the bottom that a left hand side of assignment expression cannot be a constant. So what it's saying there is you created a constant. You can't change the value of it. So now if I simply get rid of this change in versionNumber and re run the tsc command. Then re run the file with node you can see that this is working. It reset the values of the var in the left variables but it did not touch the constant. So that is the difference between a constant and a var and a let.

Now there's a much more subtle difference between var and let, in terms of how they work in a program. I'm going to create a basic function and I'm first going to comment all this out. So you'll have access to it in the show notes but it won't interfere with the rest of the program. So I'm going to create a basic function and don't worry we're going to get into functions in more detail later on. So I'm going to create a printName function and just pass in two arguments which is going to be first and the last name and inside of the function I'm going to create or declare a variable. 

function printName(f, l) {
  var greeting : string = “Hi there, ”;
  console.log(greeting + f + “ “ + l);
}

printName(“Jordan”, “Hudgens”);

So I'm going to create one and call it greeting it's of type string and inside of this. Say “hi there” comma and then give a semi colon. Now I'm going to create a console log statement and inside of this I'm going to pass in greeting and I'm going to do some string interpellation so I'm going to say first followed by a space and followed by the last name. And now if I go in and then I also have to call the function so call print name and pass and Jordan and then Hudgens the semi semicolon at the end. Now if I run tsc and then run the file you can see that the function prints it out. My first and last name right after I gave the greeting.

Now if I change this to let. And I re run everything again. You can see everything still works perfectly.

function printName(f, l) {
  let greeting : string = “Hi there, ”;
  console.log(greeting + f + “ “ + l);
}

printName(“Jordan”, “Hudgens”);

So there is no difference on that side. But now where the difference occurs is when I do something like this. So if I copy all of this and I have this let statement here in both spots so I have let greeting and let greeting and I try to change this and say hey there in this one. It's not going to let me do that and it's going to throw an error. And that's because you are not allowed to redefine a let statement. 

function printName(f, l) {
  let greeting : string = “Hi there, ”;
  console.log(greeting + f + “ “ + l);

  let greeting : string = “Hey there, ”;
  console.log(greeting + f + “ “ + l);

}

printName(“Jordan”, “Hudgens”);

You can reset the value so I could do something like this. I could set a greeting and then change that. Now if I run this code.
You'll see that this still works perfectly. 

function printName(f, l) {
  let greeting : string = “Hi there, ”;
  console.log(greeting + f + “ “ + l);

  greeting = “Hey there, ”;
  console.log(greeting + f + “ “ + l);

}

printName(“Jordan”, “Hudgens”);

But now where it's a little bit different is if I change this to var and I copy that duplicate it one you can see that there is no error. So this is letting us redefine everything. 

function printName(f, l) {
  var greeting : string = “Hi there, ”;
  console.log(greeting + f + “ “ + l);

  var greeting : string = “Hey there, ”;
  console.log(greeting + f + “ “ + l);

}

printName(“Jordan”, “Hudgens”);

And you may wonder why that's a big deal. Part of the reason why it's such a big deal is because what if I actually change this to number and change of that value here you can see that this is now given an error.

function printName(f, l) {
  var greeting : string = “Hi there, ”;
  console.log(greeting + f + “ “ + l);

 var greeting : number = 123456;
  console.log(greeting + f + “ “ + l);

}

printName(“Jordan”, “Hudgens”);

So it's very important is when you're redefining this is make sure that you are you're only allowed to redefine it if you're using the same data type. So let me. If we hover over if we click on it's going to say subsequent variable declarations must have the same type. So variable greeting must be of type string but here as type number.

So if I fix this. And I change this one back to Hey there this is still going to work. You can see that works even though I'm re declaring it. But now if I hit Let you're going to get a different kind of error message you're not getting the same one about the data type that's only specific to VAR's and now you're getting one that says can't re declare block scoped variable grading. So that's really where the difference comes down to is where and when you have a block scoped item such as a variable with a lead. It's a very specific on how you can declare that where with var you have more flexibility. This is something that comes in handy. The more you get into angular development and so I wanted to really point out what those key differences were they may seem subtle and in a very simplistic program they're not going to matter at all. However once you get into things like working with big data management or anything like that the difference between and var actually becomes much more important and also hopefully you can see some of the power with typescript in the fact that It also caught when I change the data type with var because in other languages that are more loose with that would never be a problem. But the issue is that it actually can lead to a lot of bugs I imagine in Ruby program where you have a variable. You set it equal to a string and then somewhere down the line you actually change the data type on accident and you set it equal to an integer or vice versa. That program is still going to run you're not going to get any errors until you try to call one of those variables and then pass a method to it. What this does is it gives you a little bit of data protection on that because it doesn't even let the program run with that kind of system in place. So here I'm just going to get rid of this change back to var and the whole program will run just like normally.

So that is an introduction to how to use variables. The VAR let in console variables along with what some of the subtle differences are between each one.

Resources