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.
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.
Share Article
Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.