Reader Level:
Articles

TypeScript in Visual Studio 2012

By Nitin Bhardwaj on October 03, 2012
In this article I have described TypeScript in Visual Studio 2012 and its installation steps.
  • 2
  • 0
  • 6167

TypeScript in Visaul Studio2012

  • TypeScript is an open source programming language developed by Microsoft.

  • TypeScript is a language for application-scale JavaScript.

  • TypeScript adds optional types, classes, and modules to JavaScript.

  • TypeScript supports tools for large-scale JavaScript applications for any browser, for any host, on any OS.

  • TypeScript is compiled to clean, readable, standards-based JavaScript.

  • TypeScript extends JavaScript syntax, so any existing JavaScript programs work with TypeScript without any changes.

  • TypeScript is designed for development of large applications and when compiled it produces JavaScript to ensure compatibility.

  • 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 main ways to get the TypeScript tools:

  • Via the Node.js package manager (npm)

  • You can install the TypeScript for Visual Studio 2012 plugin (Download it from here)

Step 2

Click on install; see:

First-window-type-script.gif
 

Step 3

Just wait for the process to complete; see:

second-window-type-script.gif
 

Step 4

Click the "Close" button and use with Visual Studio 2012; as in:

final-window-type-script.gif
 

TypeScript is a language extension language with some futures added to JavaScript; they are:

  • Type Annotations and Compile-Time Type Checking

  • Classes

  • Interface

  • Modules

  • 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.

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.

InterfaceDeclaration:

interface   Identifier   InterfaceExtendsClauseopt   ObjectType

InterfaceExtendsClause:

extends   InterfaceNameList

InterfaceNameList:

InterfaceName

InterfaceNameList   ,   InterfaceName

InterfaceName:

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.

ModuleDeclaration:
module   IdentifierPathopt  {   ModuleBody  }

IdentifierPath:
Identifier
IdentifierPath  
.   Identifier

ModuleBody:
ModuleElements

TypeScript supports two types of modules.

Internal modules Internal modules are declared using ModuleDeclarations that specify their name and body. A name 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.

Nitin Bhardwaj

Normal 0 false false false EN-US X-NONE X-NONE ... Read more

COMMENT USING

Trending up