Declaring Variables in TypeScript

Variable

A variable can be defined as “a named space in the memory” that is used to store some value. Basically, it works as a container to hold the values in a program. It can be referred by some identifier and its value can change during the execution of the program. TypeScript variables follow the naming rules defined for JavaScript.

• The name of the variable can contain alphabets and numeric digits
• It should not contain spaces and special characters, except the underscore (_) and the dollar ($) sign.
• The name of the variable should not start with a digit.

The TypeScript is the superset JavaScript, so it supports declaring a variable using var, let and const.

Variable declarations

The general syntax for declaring a variable in TypeScript is,

However, declarations in the following manner are also valid,

var v1:string = "TypeScript";
var v2:number;
var v3=15;
var v4;

for example,

var myname:string = "Robin"; 

var marks1:number = 50;

var marks2:number = 42.50;

var total = marks1 + marks2; 

console.log("My name"+myname); 

console.log("Marks1: " + marks1); 

console.log("Marks: " + marks2); 

console.log("Total of the marks: " + total);

The resultant compiles JavaScript will appear as,

var myname:string = "Robin"; 

var marks1:number = 50;

var marks2:number = 42.50;

var total = marks1 + marks2; 

console.log("My name"+myname); 

console.log("Marks1: " + marks1); 

console.log("Marks: " + marks2); 

console.log("Total of the marks: " + total);

If different type value is tried to be assigned to a variable declared with some type(read types in TypeScript), the compiler will produce an error. TypeScript is strongly typed and ensures that the variables must have the same type as provided at the time of variable declaration. Therefore the following code will generate a compile-time error.

var message:string = 55  // it will produce in compile time error

Re-declaring variables

Re-declaration of variables of valid with var declaration. Therefore, the following code is valid in TypeScript,

function fun(v) {
    var v;
    var v;

    if (true) {
        var v;
    }
}

All variables v, actually refers to the same variable v. This can often generate bugs in the results. We can use let declarations to counter such situations.

For example,

function fun() {
    let v = 100;
    var v = 100; // error: can't have both declarations of 'v'
}

Inferred Typing

TypeScript encourages the dynamic typing of variables. It is good practice to declare a variable without a type. The TypeScript compiler can automatically detect the type of the variable according to the value assigned to the variable.

var message = "Hello World";   // data type inferred as String 
console.log("Message:"+message); 
message = 18;  //Type '18' is not assignable to type 'string'.
console.log(message);

Scopes of TypeScript Variable 

The accessibility of a variable inside a program is known as its scope. The following scopes of a variable are possible in TypeScript,

Global Scope

All global variables are available everywhere in our program code.

Class Scope

Also known as class fields or class variables. They are declared within the class but outside the methods. We can access fields by using the object of the class. It is also possible to create static fields. Static fields are accessible by using the class name only. 

Local Scope

These variables belongs to the program constructs like methods, loops etc. These variables are available within their own block where they are declared only.

For example,

var var_global = 12          //global variable 

class SomeClass { 

   var_class_field = 13;      //class variable 

   static staic_var = 10;     //static field 

   

   message():void { 

      var local_var = "Hello World";    //local variable 

      console.log(local_var);

   } 

}