TypeScipt adventure

In an effort to add to our development team skill sets and keep our team up to date with the latest technologies, I have ventured into the land of Anders Hejlsberg’s latest creation (TypeScript).
To install TypeScript in Visual Studio 2013, go to File, New Project, Other Project Languages then click on Install the latest Typed Script for visual studio. After the installation is complete, I recommend installing Web Essentials plugin for visual studio.
Some of the core features of TypeScript are:

  1. IDE support: TypeScript is supported in Visual Studio.Net 2012 and Visual Studio 2013. When writing TypeScript code, the IDE will provide code completion just like when you write C# code.
  2. Classes: even though the current ECMA script specs doesn’t include any javascript support for classes. In TypeScript a class is very similar to the concept of a class in C#. You can inherit from other classes to extend or specialize the behaviour.
  3. Modules: Modules are analogous to C# namespaces. They allow you to group a number of classes together into a logical group. A module can also have functions and variables alongside classes
  4. Interfaces: An interface in TypeScript is similar to those you have come across in C#. It is a contract - if one of your classes implements an interface, it promises to have certain properties or methods that the interface documents. In TypeScript, an interface can inherit from another interface in order to extend it and from a class, to capture its implementation. Whenever something seems impossible in TypeScript, you can usually solve it with an interface!
  5. TypeScript is a static language. Erroneous code will result in a failed build because of TypeScript Static type checking
  6. TypeScript produces pure JavaScript, if you read ECMA script 6 proposed specs, you will notice the resemblance between TypeScript and the proposed implementations in ECMA Script 6
  7. TypeScript supports most of the popular javascript libraries via NuGet

If you have already installed TypeScript, copy and paste this code into a .ts file:

/// <reference path="Scripts/typings/jquery/jquery.d.ts" />
interface IPerson {
    gender: string;
}
class Person implements IPerson {
    gender: string;
}
class Student extends Person {
    constructor(public firstName: string, public lastName: string, gender: string) {
        super();
        this.gender = gender;
    }
 
    register(): string;
    register(courseName: string): string;
    register(student: Student): string;
    //? denotes the param obj is optional
    register(obj?: any): string {
        return "any";
    }
 
}
window.onload = () => {
    var student = new Student("Sammy", "Ageil", "M");
    console.log(student.firstName);
};

The compiled result will look like the following javascript snippet:

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 __();
};
/// <reference path="Scripts/typings/jquery/jquery.d.ts" />
var Person = (function () {
    function Person() {
    }
    return Person;
})();
var Student = (function (_super) {
    __extends(Student, _super);
    function Student(firstName, lastName, gender) {
        _super.call(this);
        this.firstName = firstName;
        this.lastName = lastName;
        this.gender = gender;
    }
    //? denotes the param obj is optional
    Student.prototype.register = function (obj) {
        return "any";
    };
    return Student;
})(Person);
window.onload = function () {
    var student = new Student("Sammy", "Ageil", "M");
    console.log(student.firstName);
};
//# sourceMappingURL=app.js.map

I will be adding more details and typescript tutorials at a later time

Comments (2) -

Keywords Jeet Review 2/18/2014 4:59:29 AM

It's actually a cool and helpful piece of information. I'm satisfied that you just shared this useful info with us. Please keep us up to date like this. Thank you for sharing.

The post was genuine good for my study, ideally I can find more equivalent details

Add comment