Welcome to today’s session on TypeScript programming, where we will take a closer look at TypeScript variables. Just as a container might hold various items, variables in TypeScript be used to store data of different types. In this lesson, our main focus will be on understanding what variables are, defining them, assigning values, grasping proper naming conventions, and finally displaying the values stored within these variables. Isn’t it exciting? Let's embark on this illuminating journey!
Imagine a box. This box can contain items like books, snacks, or even small gadgets. Variables in TypeScript are akin to such boxes—they store different types of values. The exciting part is that, similar to changing the contents of the box, the values variables hold can also be changed. Now let's see this in action with some code:
TypeScript1let myVariable: string = "Hello, TypeScript!"; 2console.log(myVariable); // This will print "Hello, TypeScript!" 3 4myVariable = "123"; 5console.log(myVariable); // This will print "123"
In this example, myVariable initially holds a greeting message and then gets re-assigned to a string containing a numerical value.
In TypeScript, defining a variable and assigning it a value can be done using the let, const, or var keywords, followed by the variable name and an optional type annotation. The let and const keywords are part of TypeScript's newer syntax and offer block-scoped binding, contrasting with var, which is function-scoped. A crucial difference to note is that variables declared with const are meant to be constants, meaning once assigned a value, it cannot change throughout the code.
Here are properly formed variable names and assignments:
TypeScript1let x: number = 7; // valid: starts with a letter 2let myVariable: number = 7; // valid: starts with a letter 3let _myVariable: number = 7; // valid: starts with an underscore 4// let 7x = 7; // invalid - starts with a digit 5// let x!y = 7; // invalid - contains the prohibited character '!'
And here is how you would define a constant variable:
TypeScript1const PI: number = 3.14; // Once set, the value of PI cannot change
After storing our precious items in variables, it’s only natural we’d want to showcase them. In TypeScript, we can use the console.log() function to display a variable’s value. Consider the following examples:
TypeScript1let firstName: string = "John"; 2console.log("The name is", firstName); // Prints "The name is John" 3 4let age: number = 30; 5console.log("The person is", age, "years old"); // Prints "The person is 30 years old"
Through the use of console.log(), we've demonstrated how one can display the values of variables. Remember, the choice between let, const, and var not only affects the scope and re-assignability of your variables but also improves the clarity and predictability of your code.
Bravo! You’ve successfully navigated through the basics of TypeScript variables! Now that you’re equipped with the knowledge of defining variables using let, const, and even var, understand proper naming conventions, and the art of displaying variables, you’re well on your way to becoming a proficient TypeScript programmer.
We eagerly await the coding exercises ahead, where you will apply what you’ve learned today in a practical manner. Let’s continue to dive deeper into the TypeScript programming journey together!