Variable in TypeScript

14 May 2022

Intermediate

227K Views

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.

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

JavaScript only hoists variable declarations, not variable initializations.
To avoid issues because of hoisting, always declare all variables at the beginning of every scope.
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:

Object Destructuring
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.