TypeScript In Visual Studio 2012

TypeScript in Visual Studio 2012

 

In this article, let's learn how to install and setup Visual Studio 2012 to work with TypeScript,

 

Before that, let's look at some of the key charactristics of TypeScript.  

1. TypeScript is an open-source programming language developed by Microsoft.
2. TypeScript is a language for application-scale JavaScript.
3. TypeScript adds optional types, classes, and modules to JavaScript.
4. TypeScript supports tools for large-scale JavaScript applications for any browser, for any host, on any OS.
5. TypeScript is compiled to clean, readable, standards-based JavaScript.
6. TypeScript extends JavaScript syntax, so any existing JavaScript programs work with TypeScript without any changes.
7. TypeScript is designed for the development of large applications and when compiled it produces JavaScript to ensure compatibility.
8. TypeScript is a superset of JavaScript, and essentially adds optional static typing and class-based object-oriented programming language.

Installation Step

 

Step 1

 

There are two ways to get TypeScript tools: 

1. Via the Node.js package manager (npm)
2. You can install the TypeScript for Visual Studio 2012 plugin. 

Step 2

 

Click on install; see:

 

 

Step 3

 

Just wait for the process to complete; see:

  

 

 

Step 4

 

Click the "Close" button and you're good to go. See:  

 

 

TypeScript is a language extension language to JavaScript and adds object-oriented and some features to JavaScript. These features are: 

1. Type Annotations and Compile-Time Type Checking
2. Classes
3. Interface
4. Modules
5. Lambda Function

Type Annotations and Compile-Time Type Checking

 

TypeScript provides static typing through type annotations to enable type checking at compile time. This is optional and can be ignored to use the regular dynamic typing of JavaScript. The type annotations for the primitive types are number, bool and string. 

function Add(left: number, right: number): number {
 return left + right;
}

Classes

 

TypeScript supports classes that are closely aligned with those proposed for ECMAScript 6, and includes extensions for instance and static member declarations and properties declared and initialized from constructor parameters. Classes and objects make TypeScript a modern JavaScript extension and makes OOP programmers to understand and write JS.

class student {
 private fname: string;
 private age: number;
 constructor(fname: string, age: number) {
  this.fname = fname;
  this.age = age;
 }
 toString(): string {
  return this.fname + " (" + this.age + ")";
 }
}

Interface

 

Interfaces provide the ability to give names to object types and the ability to compose existing named object types into new ones. Interfaces have no run-time representation; they are purely a compile-time construct. Interfaces are particularly useful for documenting and validating the required shape of properties, objects passed as parameters, and objects returned from functions. 

 

Interface syntax: 

1. interface Identifier InterfaceExtendsClauseopt ObjectType  
2. InterfaceExtendsClause:  
3. extends InterfaceNameList  
4. InterfaceNameList:  
5. InterfaceName  
6. InterfaceNameList , InterfaceName  
7. InterfaceName:  
8. TypeName  

Modules

 

A module is a body of statements and declarations that create and initialize a singleton module instance. Members exported from a module become properties on the module instance. The body of a module corresponds to a function that is executed once, thereby providing a mechanism for maintaining local state with assured isolation.

 

Module declaration: 

1. module IdentifierPathopt { ModuleBody }  
2. IdentifierPath:  
3. Identifier  
4. IdentifierPath . Identifier  
5. ModuleBody:  
6. ModuleElements  

TypeScript supports two types of modules.

 

Internal modules: Internal modules are declared using ModuleDeclarations that specify their name and body. A named path with more than one identifier is equivalent to a series of nested internal module declarations.

 

External modules: An external module is written as a separate source file that contains at least one import or export declaration.