TypeScript – A Super Set of JavaScript

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!!!!

One thought on “TypeScript – A Super Set of JavaScript

  1. After watching the video and thinking about it, following is what comes to mind

    1. Step in the right direction by microsoft.
    2. We should also analyze it deeply asap, so that actual experience tells us more about the stregths, weaknesses, applicability etc.
    3. Microsft could use this platform to compile Typescript to any target – may even be IL, like silverlight, at any point of time, so they are not only dependent on javascript in times to come. As, only time will tell how would the browser/HTML5 development wars ben won
    4. The MS developers would no doubt want to move it and try it, MS is also seemingly trying as how to convert non-MS developers to MS tools too.

Leave a Reply

Your email address will not be published. Required fields are marked *


× 1 = two

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>