TypeScript


23 November 2012, by

Microsoft recently launched a new language called TypeScript, which is both a superset of, and compiles down to, JavaScript. The idea is to extend JavaScript to have EMCAScript 6 features, which are quite neat.

At its most basic it adds optional typing:

function formatName(first: string, middle: string, last: string) {
return first + " " + middle.substr(0, 1) + ". " + last;
}

formatName("Edward", "Davis", "Wood");
formatName("Ed", "Wood"); //Error
formatName(1, 2, 3); //Error

This correctly displays errors for the last two, but still generates the following JavaScript:

function formatName(first, middle, last) {
return first + " " + middle.substr(0, 1) + ". " + last;
}
formatName("Edward", "Davis", "Wood");
formatName("Ed", "Wood");
formatName(1, 2, 3);

As you can see, in this basic example, it’s pretty much the same. The type inference is sufficiently good that you should only need to type the arguments to functions, and it’ll do the rest for you.

But it doesn’t just detect errors, it also supports creating classes:

class Employee {
constructor(public name: string) {
}

fileTimesheet() {
this.timesheetFiled = true;
}
hasFiledTimesheet() {
return this.timesheetFiled;
}
private timesheetFiled = false;
}

class Manager extends Employee {
chaseUpTimesheet(managee: Employee) {
managee.fileTimesheet();
}
}

Note that using the public keyword in the constructor causes this to be created as a field. Compiled this looks a little horrible:

var __extends = this.__extends || function (d, b) {
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
}
var Employee = (function () {
function Employee(name) {
this.name = name;
this.timesheetFiled = false;
}
Employee.prototype.fileTimeSheet = function () {
this.timesheetFiled = true;
};
Employee.prototype.hasFiledTimesheet = function () {
return this.timesheetFiled;
};
return Employee;
})();
var Manager = (function (_super) {
__extends(Manager, _super);
function Manager() {
_super.apply(this, arguments);

}
Manager.prototype.chaseUpTimesheet = function (managee) {
managee.fileTimeSheet();
};
return Manager;
})(Employee);

You can now make use of these classes using simple and pure JavaScript (which is unaffected by the compiler)

var manager = new Manager("Ric Hill");
var managee = new Employee("David Giles");
manager.chaseUpTimesheet(managee);
managee.chaseUpTimesheet(manager); //Error: Impertinent

TypeScript also support Modules (namespaces) and interfaces, and you can download header files to add support to various libraries (including jQuery).

It’s probably not ready to be used in any projects yet, only being a month old, but having compiled it you can just get rid of the TypeScript and develop it as normal JavaScript if you wished.

You can play around with it at typescriptlang.org, where you can also get a good plugin for Visual Studio 2012.

Tags: , ,

Categories: Technical

«
»

Leave a Reply

* Mandatory fields


five × 4 =

Submit Comment