Navratri Sale: Get Upto 30% OFF on Live Training! Offer Ending in
D
H
M
S
Get Now
Variable in TypeScript

Variable in TypeScript

22 Dec 2023
Intermediate
231K Views
4 min read
Learn via Video Course & by Doing Hands-on Labs

TypeScript Programming Course

TypeScript is a superset of JavaScript which provides static type checking for JavaScript. TypeScript uses JavaScript syntax to define variables. The variables in TypeScript are a way to store the information that can be a text, number, object, array or other character depending upon the data type and the variable hold the space into the memory once the value is being allocated to them.

In TypeScript, all the variables' behavior of the declaration and the initialization with var, let and const keywords are the same but the only difference is all about the scope and it's the usage of the variables will differ based on the defined data type.

Here, we will discuss the TypeScript statements which you can use to write your TypeScript code.

Variable Statement

In TypeScript, a variable statement is extended to include optional type annotations.

Syntax

  :  = ; 
  : ;

Variable Declaration using var, let, and const

Before ES6, JavaScript has only a var keywords to define a variable. Now, ES6 provides let and const keywords to declare a variable in JavaScript.

  1. var - It supports only function scope. It doesn’t support block scope. The var variable can be accessible to all the places within the containing functions and the value of the var can be completely re-assigned.

  2. let - It is similar to var but it supports block scope or the lexical scope where the block scope variable can not be accessed outside the containing function. Unlike var, you cannot redeclare it twice in the same scope.

  3. const - It is similar to let but the major difference between let and const is that the const values cannot be changed or re-assigned anyhow. Also, at the time of declaration, you have to assign value to it.

variable.js

var x = 4;
let number = 50;
const key = 'xyz123';

//OR
var x: number = 4;
let number: number = 50;
const key: string = 'xyz123';

Block Scoping

let supports block scope. When you define, a variable using let within a block like if statement, for loop, switch statement, etc., the block-scoped variable is not visible outside of its containing block.

block.js

function foo(flag: boolean) {
 let a = 100;
 
 //if block
 if (flag) { 
 // 'a' exists here
 let b = a + 1;
 return b;
 }
 // Error: 'b' doesn't exist here
 return b;
}

Hoisting

When you use var to declare a variable, you have to deal with hoisting. Hoisting is JavaScript's default behavior of moving variable declarations to the top of the current scope (i.e. top of the current js file or the current function). It means, in JavaScript, a variable can be used before it has been declared.

hoisting.js

var x = "Gurukulsight";
function foo() { 
 console.log(x); //Gurukulsight
}

function bar() {
 console.log(x); //undefined
 var x; //x declaration is hoisted, that’s why x is undefined
}
foo();
bar();

In the above bar function declaration of the x variable will move to the top of the bar function variable declaration and within the bar function, we have not specified any value to x, hence its default value is undefined.

Important Information

  1. JavaScript only hoists variable declarations, not variable initializations.

  2. To avoid issues because of hoisting, always declare all variables at the beginning of every scope.

  3. Use ES6 - let and const to avoid hoisting.

hoistingfixed.js

var x = "Gurukulsight";
function bar() {
 console.log(x); //Error: x is not defined
 let x; //x declaration is not hoisted
}
bar();

Destructuring

Destructuring means breaking up the structure. Destructuring is a way to quickly extract the data from a single object or array and assign it to multiple variables within a single statement. ES6 also supports object destructuring.

TypeScript supports the following forms of Destructuring:

  1. Object Destructuring

  2. Array Destructuring

destructuring.ts

let list = ['one', 'two', 'three'];
let [x, y, z] = list; //destructuring the array values into three variables x,y,z

console.log(x); // 'one'
console.log(y); // 'two'
console.log(z); // 'three'

let obj = {x: 'one', y: 'two', z: 'three'};
let {x, y, z} = obj; // destructuring the object properties x, y, z

console.log(x); // 'one'
console.log(y); // 'two'
console.log(z); // 'three'

Destructuring can also be used for passing objects into a function that allows you to extract specific properties from an object.

destructuring_auguments.ts

function greet({firstName, lastName}): void {
 console.log(`Hello, ${firstName} ${lastName}!`);
}

let p1 = { firstName: 'Shailendra', lastName: 'Chauhan' };
let p2 = { firstName: 'Kanishk', lastName: 'Puri' };

greet(p1) // -> Hello, Shailendra Chauhan!
greet(p2) // -> Hello, Kanishk Puri!

What do you think?

I hope you will enjoy the Statements in TypeScript while developing your web app. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

Take our Typescript skill challenge to evaluate yourself!

In less than 5 minutes, with our skill challenge, you can identify your knowledge gaps and strengths in a given skill.

GET FREE CHALLENGE

Share Article

Live Classes Schedule

Our learn-by-building-project method enables you to build practical/coding experience that sticks. 95% of our learners say they have confidence and remember more when they learn by building real world projects.
Full-Stack .NET Developer Certification TrainingOct 13SAT, SUN
Filling Fast
07:00AM to 09:00AM (IST)
Get Details
ASP.NET Core ProjectOct 19SAT, SUN
Filling Fast
10:00AM to 12:00PM (IST)
Get Details
Advanced Full-Stack .NET Developer Certification TrainingOct 20SAT, SUN
Filling Fast
09:30AM to 11:30AM (IST)
Get Details
.NET Solution Architect Certification TrainingOct 20SAT, SUN
Filling Fast
05:30PM to 07:30PM (IST)
Get Details
.NET Microservices Certification TrainingOct 20SAT, SUN
Filling Fast
05:30PM to 07:30PM (IST)
Get Details
ASP.NET Core Certification TrainingOct 20SAT, SUN
Filling Fast
09:30AM to 11:30AM (IST)
Get Details
Microsoft Azure Cloud Architect with AINov 10SAT, SUN
Filling Fast
07:00AM to 09:00AM (IST)
Get Details

Can't find convenient schedule? Let us know

About Author
Amit Kumar (Software Engineer And Author)

Experienced Software Engineer with a demonstrated history of working in the professional training & coaching industry. Skilled in Asp.net MVC, Angular, Language Integrated Query (LINQ), SQL, C++, and HTML. Strong engineering professional graduated from Sathyabama University.
Accept cookies & close this