TypeScript

You can use Visual Studio Code for developing TypeScript applications.

First you need to download and install the following:

• Visual Studio Code Download and install from the following link  Visual Studio Code
• NodeJS Download and install from the following link   Node.For windows 8 download 64 bit version.
• TypeScript Download and install from the following link. TypeScript

1.Check the installed version of NPM

Once you install Node.js ,NPM will be automatically installed.NPM is Node Pacakge Manager.
It is used when developing TypeScript applications.

Verify if the NPM is installed and check the installed version of NPM.

npm -v.

Install the latest version of NPM by executing the following command:

npm install npm@latest -g

2.Install TypeScript

To install the TypeScript you just need to execute the following npm command:

npm install -g typescript

3.Install Visual Studio Code.

You can download Visual Studio Code from the following

Visual Studio Code

4.Create root directory for typescript

Once you install Visual studio code you can create a root directory in which you want to add the files of your application.

Now you can open the root directory in Visual Studio Code.

There are few important config files you need when working with TypeScript application in Visual Studio Code:

• launch.json  Used for configuring debugging
• tsconfig.josn  This is required in the root directory of the application.
• tasks.json   This is used to define task configuration.

 

Follow on:

Visual studio code overview

Visual studio code is cross platform,open source code editor.It is supported on Windows,OS X and Linux.
VS code is a generic editor and could be used for any language. You can use it to write code for languages such as:

• C#
• JavaScript
• TypeScript
• Node.js development

It is the first cross platform editor from Microsoft has following features:

• intellisense  support
• Code refactoring
• Command line tool
• debugging different languages
• It uses roslyn which is the same compiler used by visual studio.
• support for different JSON schemas out of the box
• It is similar to text editors such as Sublime text.
• VS code gives auto completion
• It has inbuilt support for GIT
• There are lot of plugins available for VS Code

To use Visual Studio code for Windows you can download it from the following path:

Download Visual Studio Code

After you install it you can open Visual Studio Code.You will see a window as below:

The left hand side consists of the toolbar which has options for:

• Explorer tabs
• Search
• Source Control ,which is GIT by default
• Extensions

You can debug application using the shortcut F5.

You can open the folder containing the code using the File -open folder menu or the shortcut keys Ctrl+K,Ctrl+O.This folder should be your root folder for the solution.

Once you select the root folder ,you view and navigate the contents of the folder in the explorer.

One nice feature of Visual Studio code is that you can execute commands within Visual Studio Code instead of opening a new command prompt.To execute the commands you can open the Integrated Terminal using the File menu or the shortcut key Ctrl+` .”`” is the tilde character.

Follow on:

Arrow functions in typescript are another way of writing fucntion.Arrow function allows us to write functions in a compact manner.
We write a normal function as:

function square(a:number): number {
return a*a;
}

the above function returns the square of passed argument.

We can write arrow function for the above function as:

var square =(a) =>a*a;

as you can see above in the case of arrow function we have replaced the body of the function.When we write arrow function we don’t write the function body as in the case of normal function.Instead we write input argument followed by the arrow operator and then the expression.

So the syntax to write arrow function is :

1.write arguments enclosed in parenthesis ,e.g (a,b)

2.write arrow operator =>

3. write the expression

Assign the expression to a variable and call the expression using this variable.

Follow on:

Looping is an important construct of any language.Looping means to repeatedly display a group of elements.Loops in TypeScript in TypeScript are useful when working with a collection.

For Each

For displaying elements in an array a useful method is forEach ().It executes the code for every element in array.
So if we pass a method to this method then it is called for every element in the array.

It is like foreach statement in other languages.So if we have an array containing names then we can display alert for
every element in the array using forEach() method.

class Utility {
Print(element)
{
alert(element)
}
}

let utility = new Utility();

var employees:string[]=[];
employees = ["Marc","John","Ram"];
employees.forEach(emp=>utility.Print("Employee Name:"+emp));

the above code will display alert message for every name in the collection.
We can also use TypeScript forEach() method with a TypeScript array containing objects. forEach loop for
array of objects can be used for evaluating each object.In the following example we are just displaying each object’s properties

class Utility {
Print(element)
{
alert(element)
}
}

class Employee{
constructor(public Name: string, public Salary: number, public EmpId: number)
{

}
}

let utility = new Utility();

var employees:Employee[]=[];
employees[0] = new Employee("Marc", 5000, 1);
employees[1] = new Employee("John", 5000, 2);
employees[2] = new Employee("Ram", 5000, 3);

employees.forEach(emp => utility.Print("Employee Name:" +
emp.Name + "Employee Salaray:"+emp.Salary+ "Employee EmpId:"+emp.EmpId));

For in loop

for in loop is used to iterate over a collection of values.If there are 5 elements in a collection then the loop will be executed 5 times.

Its syntax is as:

for (var element in collection) {
//statements
}

In the following example an array is declared having 5 elements.The elements in the array are iterated using the for in loop as:

var coll: string[];
coll = ["a","b","c","d","e"];
for (var alphabet in coll) { 
alert(alphabet);
}

 

Follow on:

TypeScript const variable is useful  when we want to declare a variable which can not be reassigned.
For example if we declare a variable as:

const id = 14;

then we can not reassign the id variable.So if we try to reassign the id variable we will get compilation error.

id=2;

If we execute the above line then we will get the error

It is necessary to initialize const variables.If const variable is not initialized then compile time error is thrown

Follow on: