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?

TypeScript is a language that has JavaScript bases and the way to declare a variable is quite similar. Let's see an example: 

// 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. 

// Explicit

let songName:string = "Raining Blood";

// Inferred

let songName = "Raining Blood";// Like JS

🙋‍♂️ If I can declare variables as inferred, what is the difference with JavaScript in this way of declaring variables?

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?

Use JavaScript.

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. 

let userId:string|number;

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

let userId:ID;
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

TypeScript follows the same JavaScript rules for creating variables. As a review, the let keyword uses a block scope while var uses a global scope. 

var jedi:boolean = true;
var name:string = "Anakin Skywalker";

if (jedi){
  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.

Back