Variable in TypeScript

Amit Kumar Print 3 min read

11 Jul 2018

Intermediate

1.29K

TypeScript is a superset of JavaScript which provides static type checking for JavaScript. TypeScript uses JavaScript syntax to define variables.

Here, we will discuss about 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 var keyword 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.
let - It is similar to var but it supports block scope. Unlike var you cannot redeclare it twice in the same scope.
const - It is similar to let but its value cannot be changed. 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., 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 above bar function declaration of x variable will move to the top of bar function variable declaration and within bar function, we have not specified any value to x, hence it’s 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 which allow 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.