Microsoft is taking a big leap over JavaScript by introducing TypeScript. Being a JavaScript developer, I know the kind of problems that crop up while developing an enterprise application or any other complex application.

According to Microsoft, TypeScript is a superset of JavaScript that uses the full power of JavaScript and OOPs based modern languages like C#.

What Microsoft says about TypeScript:

“TypeScript helps programming teams to define interfaces between software components and to gain insight into the behavior of existing JavaScript libraries. TypeScript also enables teams to reduce naming conflicts by organizing their code into dynamically-loadable modules. TypeScript’s optional type system enables JavaScript programmers to use highly-productive development tools and practices: static checking, symbol-based navigation, statement completion, and code re-factoring.” Taken from specification document.

The best thing about TypeScript is it is built upon Ecmascript 6 standards. Though not fully implemented but most of the standards are there.

For your reference, to name a few, a high level list is –

Classes

Modules

Interfaces

Structural Subtyping

Contextual Typing

Object Types

Function Types

(This is not a full list. Full list can be seen in the specification document provided by Microsoft.)

Below are some examples to show how different it is and how it can be helpful for an OOPs developer –

Class

JavaScript practice has at least two common design patterns: the module pattern and the class pattern. Roughly speaking, the module pattern uses closures to hide names and to encapsulate private data, while the class pattern uses prototype chains to implement many variations on object-oriented inheritance mechanisms.

A simple BankAccount class example –

class BankAccount {

balance = 0;

deposit(credit: number) {

this.balance += credit;

return this.balance;

}

}

How this will look like in JavaScript

var BankAccount = (function () {

function BankAccount() {

this.balance = 0;

}

BankAccount.prototype.deposit = function(credit) {

this.balance += credit;

return this.balance;

};

return BankAccount;

})();

Construct declaration in Class

If we want to start our bank account with an initial balance, we can add to the ‘BankAccount’ class a constructor declaration.

class BankAccount {

balance: number;

constructor(initially: number) {

this.balance = initially;

}

deposit(credit: number) {

this.balance += credit;

return this.balance;

}

}

Interface

interface BankAccount {

balance: number;

deposit(credit: number): number;

}

Structural Subtyping

Object types are compared structurally. For example, in the code fragment below, class ‘CPoint’ matches interface ‘Point’ because ‘CPoint’ has all of the required members of ‘Point’.

interface Point {

x: number;

y: number;

} function getX(p: Point) {

return p.x;

} class CPoint {

constructor (public x: number, public y: number) { }

} getX(new CPoint(0, 0)); // Ok, fields match getX({ x: 0, y: 0, color: “red” }); // Extra fields Ok getX({ x: 0 }); // Error: supplied parameter does not match

Here I tried to give you a high level overview of how TypeScript is changing the way of development for better reasons.

For more details you can go to the Channel 9 video where Hejlsberg presents TypeScript and related documents can be found here.

Good luck and happy coding!!!!