What is Variable in TypeScript? How to Declare Variable in TypeScript?

The variable is simply a name of storage location and all variables must be identified with unique names and these unique names are called identifiers.

Note –  I am using the “let” keyword instead of “var” keyword. The “let” keyword is actually a newer JavaScript construct that TypeScript makes available. Actually, many common problems in JavaScript are reducing by using “let” keyword. So we should use “let” keyword instead of “var” keyword.

Stayed Informed – Learn Angular 2

A variable contains values such as "Hi" or 22. When you use the variable, you refer to the data it represents. For example –

let name: string = "Hi"; //var name: string = "Anil Singh";

let num: number = 22; //var num: number = 22;

There are some rules while declaring variables i.e.

1.     The variable names must begin with a letter

2.     The variable names can contain letters, digits, underscores, and dollar signs.

3.     The variable names can also begin with “$” and “_”

4.     The variable names are case sensitive that means “a” and “A” are different variables.

5.     The variable reserved words can’t be used as names.

Declaring Variables

let isActive: boolean = false;

let decimal: number = 6;

let hex: number = 0xf00d;

let name: string = "Anil Singh";

let binary: number = 0b1010;

let octal: number = 0o744;

let numlist: number[] = [1, 2, 3];

let arrlist: Array<number> = [1, 2, 3];

//Any Keyword

let list: any[] = [1, true, "free"];

list[1] = 100;

//Any Keyword

let notSureType: any = 10;

notSureType = "maybe a string instead";

notSureType = false; // definitely a Boolean

TypeScript – [declare vs. var]

The “var” creates a new variable. The “declare” is used to tell TypeScript that the variable has been created elsewhere. If you use declare, nothing is added to the JavaScript that is generated. It is simply a hint to the compiler.

What is scope variable?

The scope is set of objects, variables and function and the JavaScript can have global scope variable and local scope variable.

We can say, we can declare a variable in the two type’s i.e.

1.     Local Scope Variable

2.     Global Scope Variable

Global Scope Variable - The global scope is a window object and it’s used out of function and within the functions.

Local Scope Variable - The local scope is a function object and it’s used within the functions.

Example for global and local variable (var/let) declarations –

//DECLARED A VARIABLE NAMED NUM WITH THE VALUE 15.
let num = 15; 

//DECLARE A VARIABLE INSIDE OF A FUNCTION
let getUser = function () {
    let name = 'Anil Singh';

    return name;
}

//RESULTS
getUser(); // returns 'Anil Singh'

//ACCESS THOSE SAME VARIABLES WITHIN OTHER FUNCTIONS
let sum = function() {
    let num = 15;

    return function subNum () {
        return num + 5;
    }
}

//RESULTS
sum(); // returns 20

//SCOPING RULES
let scopingRulesSum = function(isActive: boolean) {
    if (isActive) {
        let num = 15;
        num = num + 1;
    }

    return num;
}

//RESULTS
scopingRulesSum(true);  // returns 16
scopingRulesSum(false); // returns 'undefined'

//IN THE JAVASCRIPT, WE WILL DECLARE MULTIPLE VARIABLES WITH THE SAME NAME. 
//IN JAVASCRIPT, NO MATTER HOW MANY TIMES YOU DECLARED YOUR VARIABLES.
//WE CAN SAY THIS IS A BUG.
var fun = function (i, isActive = true) {
    var i;
    var i;

    if (isActive) {
        var i;
    }
    //The all declarations of 'i' actually refer to the same 'i'.
}

//IN THE TYPESCRIPT, NOT POBISBLE TO DECLARE MULTIPLE VARIABLES WITH THE SAME NAME
//IT WILL GIVE US ERROR (ERROR: CAN'T RE-DECLARE 'I' IN THE SAME SCOPE).
let i = 15;
let i = 20; // error: can't re-declare variable 'i' in the same scope.

I hope you are enjoying with this post! Please share with you friends. Thank you!!