Typing TypeScript

By | April 17, 2013
0 Comments

Since companies are moving every single application to web, TypeScript gets more and more interesting. JavaScript is nice, but it wasn’t designed for big web applications. TypeScript is a Javascript language extension with very useful features. It isn’t a JavaScript killer. The code is converted to JavaScript and the browser executes pure JavaScript code. We don’t need a TypeScript interpreter.

TypeScript features:

Type annotation/signature Declaring function parameter and return types. Enables type checking at compile time.
Classes Classes and inheritance.
Interfaces Used for describing types and indexable objects. Extending existing types.
Modules Code encapsulation. A well designed module is maintainable and can be reused.
Lambda expressions Creating lambda/anonymous functions.

Here is a small example.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
module HardWorker {
 
    export interface ISayHello {
        sayHello(): void;
    }
 
    export class Developer implements ISayHello {
        public firstName: string;
        public lastName: string;
 
        constructor(firstName: string, lastName: string) {
            this.firstName = firstName;
            this.lastName = lastName;
        }
 
        sayHello() {
        }
    }
 
    export class JavaDeveloper extends Developer {
        sayHello() {
            alert("Hello Java");
        }
    }
 
    export class DotNetDeveloper extends Developer {
        sayHello() {
            alert("Hello C#");
        }
    }
}
 
window.onload = () => {
     
    var javaDev = new HardWorker.JavaDeveloper("Max", "Muster");
    var dotNetDev = new HardWorker.DotNetDeveloper("Darko", "Micic");
     
    javaDev.sayHello();
    dotNetDev.sayHello();
};

The compiler generates following JavaScript code. (This code is executed in the browser.)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
var __extends = this.__extends || function (d, b) {
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var HardWorker;
(function (HardWorker) {
    var Developer = (function () {
        function Developer(firstName, lastName) {
            this.firstName = firstName;
            this.lastName = lastName;
        }
        Developer.prototype.sayHello = function () {
        };
        return Developer;
    })();
    HardWorker.Developer = Developer;   
    var JavaDeveloper = (function (_super) {
        __extends(JavaDeveloper, _super);
        function JavaDeveloper() {
            _super.apply(this, arguments);
 
        }
        JavaDeveloper.prototype.sayHello = function () {
            alert("Hello Java");
        };
        return JavaDeveloper;
    })(Developer);
    HardWorker.JavaDeveloper = JavaDeveloper;   
    var DotNetDeveloper = (function (_super) {
        __extends(DotNetDeveloper, _super);
        function DotNetDeveloper() {
            _super.apply(this, arguments);
 
        }
        DotNetDeveloper.prototype.sayHello = function () {
            alert("Hello C#");
        };
        return DotNetDeveloper;
    })(Developer);
    HardWorker.DotNetDeveloper = DotNetDeveloper;   
})(HardWorker || (HardWorker = {}));
window.onload = function () {
    var javaDev = new HardWorker.JavaDeveloper("Max", "Muster");
    var dotNetDev = new HardWorker.DotNetDeveloper("Darko", "Micic");
    javaDev.sayHello();
    dotNetDev.sayHello();
};
//@ sourceMappingURL=app.js.map