TypeScript

There are multiple ways to loop over list of items in TypeScript.You select the method depending upon your requirement.For example you can use the for loop to iterate over all the items in a collection.

Looping from start index to end index

For looping over elements from start limit to max limit we use for loop with a counter variable.The syntax of this loop is:-

for(var counter:number = 1; number<1; number++){
//
}

For example ,to loop over elements from 1 to 100 we can use for loop as:

for(var limit:number = 1; limit<100; limit++){
alert("for loop executed : " + limit)
}

Looping over collection

If you have a collection which contains different items then you can loop over the collection using for ..in loop as:-

For collections we normally use

for(var item in collection) {

alert(collection[item]);
}

this will loop over all the items in the collection.So if your requirement is to loop over all the collection elements then you could use this loop.

Suppose you have declared a string array as:

var coll: string[]; coll = ["a","b","c","d","e"];

then you can loop over all the items in the array:

for(var item in coll) { alert(coll[item]); }

Another way of looping over collection elements

Another option for looping over the items in the collection is item of collection ,used as:
for example if you have declared collection as:

coll = ["a","b"];
//then you can loop over the collection elements as:
for (let alphabet of coll) {
alert(alphabet);
}

you can also loop over string using this loop:

coll = "ab";
for (let char of coll) {
alert(character);
}

ashish

Generics is concept used in different programming languages.Generic are used for defining reusable elements such as classes,methods and interfaces.

In TypeScript you can define Generic Classes,Interfaces and functions.Generic functions ,generic interfaces and generic classes work with different data types using the concept of type parameters.

Type parameter is a parameter which specifies the data type of a generic Class or Interface.When we create an object a generic type we specify type parameter.The specified type parameter determines the type of the generic type.

Generic parameters are defined in a different manner then normal parameters.Normal method parameters are defined as comma separated values inside paranthesis “(” and “)”.Generic parameters are instead specified inside angle brackets “<” and “>”.For example you can specify a type parameter called T as <T>.T represents the type used by the generic class or interface.
Type parameter are part of the type.For example you can define a generic collection object as:

var collObj= new Collections.Set<number>();

Generic Class

Generic class uses type parameters to define a class which will work with different data types.For example in the following generic class T is the type parameter.

class Department<T>
{
//different types of employees
private employees:Array<T>=new Array<T>();
add(employee:T)
{
this.employees.push(employee);
}
}

You can define a class which will work with HREmployee type as:

let hrDepartment:Department<HREmployee>=new Department<HREmployee>();

Generic function

Generic function works with different data types by defining generic parameters.In the following example we have declared a Generic function called GenericFunction. The type passed to this function is called T.We are using T to declare the type
of parameters passed to the GenericFunction function.We are also using T to declare the return type of the function.

function GenericFunction<T>(x:T):T
{
return x*x;
}

You can call the GenericFunction by using the following syntax:

GenericFunction<int>(1);

Generic Interface

You define a generic interface by using the keyword interface followed by the interface name and the the type parameters.Following interface declares a single method which will return value of type parameter T.

interface GenericInterface<T>{
getEmployee:()=>T;
}

You can use generic interface to implement a generic class as:

class GenericClass<T> implements<T>{

}

ashish

Like other programming languages such as C# and Java,TypeScript also has the this keyword.The this keyword refers to the current object.The object which this keyword refers is different depending upon the context.

Use of this keyword in TypeScript depends on the context in which it is used.

In the following example truck class uses the this keyword.The keyword refers to different objects in the constructor and the getEmployeeName function.In the constructor this refers to the Employee class whereas in the getEmployeeName ,this refers to the any type which is a special type in TypeScript.

class Employee{
name:string;
constructor(name:string)
{
this.name = name;//type of a is Employee
alert(this.name);
alert(this.getEmployeeName().name);
}

getEmployeeName=function()
{
return this;//this is of any type
}

}

let employee= new Employee("Amit");

let button = document.createElement('button');
button.textContent = "search employee";
button.onclick = function() {
alert(employee.getEmployeeName());
}

document.body.appendChild(button);

If you execute the above code you will get the employee name displayed two times.Both getEmployeeName () function and constructor refers to the Employee object at run time.But at compile time type of this in function is any.TypeScript any type can refer to any type in TypeScript.

ashish

There are few different conditional statements in TypeScript such as If ..else.One useful conditional statement is switch..case.

The switch statement is used to test the value of an expression against multiple constant values.We provide the expression as input to the switch statement.The switch statement contains multiple case statements.The expression is compared against the label constant of each case.When the expression matches the constant then the statements in that case are executed

If no case matches the expression then the statements of the default case are executed.This flow can be depicted using the
following diagram:

Following is an example demonstrating the use of switch statement in TypeScript.We have declared a class called Products.In this class we have declared a function called findItem.We are passing a parameter to the findItem() function.

The findItem() function declares a switch statement.Based on the matching expression value appropriate message is displayed.

class Products{
element: HTMLElement;
div: HTMLElement;
constructor(element: HTMLElement) {
this.element = element;
this.div = document.createElement('div');
this.element.appendChild(this.div);
}

findItem(item: string) {
switch (item) {
case "laptop": {
this.div.innerHTML = "laptop found";
alert("laptop");
break;
}
case "desktop": {
alert("desktop");
this.div.innerHTML = "desktop found";
break;
}
default: {
this.div.innerHTML = "item not found";
alert("not found");
break;
}
}

}
}
window.onload = () => {
var el = document.getElementById('items');
var products= new Products(el);
products.findItem("mp3");
};

Fall through Case

Following is an example of fallthrough case statement

case 0: 
statements;

case 1:
statements;
break;

If we turn on the following switch then the above statement is invalid in TypeScript
–noFallthroughCasesInSwitch

However the following statement is valid since thefirst case is empty

case 0:
case 1:
statements;
break;

ashish