Types and variables in TypeScript
Last update: 01 - 11 - 2023
To get started with any programming language it is important to understand what a variable is. These are nothing more than a container for data or information and in the case of TypeScript this data must be specified. How that works? 🤔 If you already have experience with some other language you will know what I mean but if this is not the case, variables are capable of storing numeric values, text strings, binary or Boolean values (true and false) and other types of more complex data that I will show later.
In case this explanation has not been entirely clear to you, here is another definition of variables that can help you.
Data Typing in TypeScript
TypeScript is a strongly-typed or statically-typed programming language. What does this mean? 👀 The variables will accept only one type of data unless it is instructed to accept several types of data; This typing can also be applied to function parameters, class properties, and more.
Among the data types in TypeScript we can find:
Having this information clear, let's move on to the next point.
How do I declare variables in TypeScript?
// As pseudo code
let variableName:dataType = "Value";
// Declaring a variable and assigning a value
let userId:number = 001;
The biggest difference is that now it is specified what type of data that variable is going to contain explicitly, ALTHOUGH! TypeScript has the ability to declare variables inferred.
Declaration of variables explicitly and inferred in TypeScript
Explicitly declaring a variable is as it is in the previous example, in this way we make sure that this is the type of data that we are going to use during the life cycle of the program.
The way to declare a variable as inferred is without determining the type of data we want to use. Let's see it in code.
let songName:string = "Raining Blood";
let songName = "Raining Blood";// Like JS
TypeScript has the ability to recognize the data type even though it was not explicitly declared. The mutability is not applied 100% in case of wanting to reassign a value to a variable; if the songName variable undergoes any change in it's value, this has to be a string and not another type of data.
let songName = "Raining Blood";
// Reassigning the value of the variable
songName = "Suckerpunch";// reassignment without errors
// Reassigning another type of data
songName = 02;// Error due to data type
🙍♂️🙎♀️🙋♂️🙍♀️ And how can we make a variable accept any type of data?
This is where we can use the any data type.
let aRandomData:any = "data as string";
let secondRandomData:any = true;
let thirdRandomData:any = !1;
Several data types in one TypeScript variable. Union types
TypeScript has the ability to decide what type of data to receive in a variable without the need to use any, limiting the type of information to be stored. To do this, use the pipe symbol ( | ) to determine the uniqueness of that data.
We use the example of userId again as it is perfect to determine a hypothetical case where it is required to use the user's information, either his name (string) or an identification number (number) and even if the input of the information of your identification number is configured as a string. The variable will accept only those data types.
Creating custom data in TypeScript. Type aliases
This programming language continues to present more versatility when we create variables. TypeScript has the power to name the data type, so we can replace the names any, booleans or numbers with the one that best suits the flow of the program ... Or with the one we like the most 😆 (As long as it is consistent).
//Creating the custom data
type ID = number|string;
//Now we can use the ID type to create explicit variables
userID = 001;//number
userID = "001";//string
//The variable userId accepts both values
The type keyword is used and then the name is created for the data type you need to use, followed by the primitive data types for the custom data are declared.
Differences between let and var in TypeScript
var jedi:boolean = true;
var name:string = "Anakin Skywalker";
let jedi = false;
let name = "Darth Vader";
console.log(jedi, name);//false, Darth Vader
console.log(jedi, name);//true, Anakin Skywalker
Although the jedi and name variables are present inside and outside the conditional block, because of the way the variables are declared the data is not reassigned. If within the if var had been used to declare the variables, the values of these are overwritten and both messages would print the values false, Darth Vader.