The World of TypeScript

So I finally got around to play with TypeScript, a (optionally) typed scripting language that compiles to JavaScript. TypeScript is great especially because of how easy it is to use to bring object oriented design into your JavaScript code. TypeScript code is written in TS formatted files that get compiled into JS. It's quite easy to learn the syntax and get started with the language. It's open source and you can get it as a plugin for Visual Studio, which gives full debugging capabilities and rich editor tooling. After installing the plugin, you can either start a TypeScript project in Visual Studio or add a TypeScript file into an existing web solution. Once saved, the TS file gets compiled and a JS file gets added inside your project folder (outside of solution explorer).

Object Orientation

Writing object oriented code in TypeScript is straightforward. A class Person with properties and a method can be written as follows:

class Person {

firstName: string;
lastName: string;
age: number;

constructor(firstName: string, lastName: string, age: number) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
}

GetFullNameAndAge() {
    return this.firstName + " " + this.lastName ", " + this.age;
    }
}

Using the public keyword on properties, you can also inject the properties in the constructor and write the same, above class as follows:

class Person {

constructor(public firstName: string, public lastName: string,
public age: number) {
}

GetFullNameAndAge() {
return this.firstName + " " + this.lastName + ", " + this.age;
}
}

Inheritance is also quite easy. Consider the base class Human:

interface IPerson {
GetFullNameAndAge();
}

class Person implements IPerson {

constructor(public firstName: string, public lastName: string,
public age: number) {
}

GetFullNameAndAge() {
return this.firstName + " " + this.lastName + ", " + this.age;
}
}

Now see how this code looks when it gets compiled to JavaScript:

var __extends = this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};
var Human = (function () {
function Human(eyeColor) {
this.eyeColor = eyeColor;
}
Human.prototype.GetEyeColor = function () {
return this.eyeColor;
};
return Human;
})();

var Person = (function (_super) {
__extends(Person, _super);
function Person(firstName, lastName, age, eyeColor) {
_super.call(this, eyeColor);
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
Person.prototype.GetFullNameAndAge = function () {
return this.firstName + " " + this.lastName + ", " + this.age;
};
return Person;
})(Human);

A bit terrifying, huh?

Modules

It's possible to structure your TypeScript code in modules, which is a way of code isolation. Modules have many advantages, such as scoping (local vs. global scope), encapsulation, testability‎ and many other things. There are two types of modules in TypeScript; internal and external.

Internal modules

An internal module is the code itself that you write in TypeScript, anything you type is globally scoped and available throughout your code. If we instantiate our class Person, it will be globally available throughout our code:

var person = new Person("John", "Smith", 26, "Brown");

However, if we place our class inside of a module Races, everything inside of it becomes locally scoped. If we then like to instantiate the class out of the local scope, we need to use the keyword export on the class:

module Races {
export class Person extends Human implements IPerson {

constructor(public firstName: string, public lastName: string,
public age: number, eyeColor: string) {
super(eyeColor);
}

GetFullNameAndAge() {
return this.firstName + " " + this.lastName + ", " + this.age;
}
}
}

var person = new Races.Person("John", "Smith", 26, "Brown");

Internal modules can also be shared across files, other classes can make a reference to them by typing (at the top of file) for instance:

///<reference path="Races.ts"/>

External modules

An external module is an outside module that you choose to import into your code in order to use it. Consider the example:

import Ethnicities = module('Ethnicities');

class Person {

constructor() {
}

GetEthnicity(country: string) {
return new Ethnicities.Ethnicity(country);
}
}

And in a different file called “Ethnicities.ts” we have:

export class Ethnicity {

constructor(public country: string) {
}
}

I recommend checking out the TypeScript playground where you can do some experimentation with the codes above, and be able to view the compiled JavaScript.

Thoughts and the Road Ahead

TypeScript is an awesome OO scripting language that brings your JavaScript to a new level, it's a language that I will definitely be using further in web development. There are many other typical OO things that you can do in TypeScript than what I've shown. The list of goodies keeps getting bigger, here you can see a roadmap of upcoming versions of the language. Hope you enjoyed this and happy scripting!