—-

I’ve been playing with TypeScript off and on since 2012 (version 0.8) and using ES6 modules seems to be the perfect way to do TypeScript/JavaScript.

In this post I will give you a quick overview how to setup your TypeScript project(s) to work with ES6 Modules. I suggest taking a look at my current TypeScript ES6 Modules Boilerplate after looking at the examples below.

I have two different setups:

1. Using TypeScript to develop your website/application
2. Using TypeScript to create a JavaScript library that others can use without TypeScript

TypeScript ES6 Modules Project Setup

TypeScript ES6 Module Sample Class

import AnotherClass from './AnotherClass';

class ExampleClass extends AnotherClass {

    public exampleProperty:string = null;

    constructor() {
        super();
    }

    public exampleMethod():void {
    }

}

export default ExampleClass;

Gruntfile for compiling your TypeScript ES6 Module Code

module.exports = function(grunt) {

    // Intelligently lazy-loads tasks and plugins as needed at runtime.
    require('jit-grunt')(grunt)();

    // -- Configuration --------------------------------------------------------
    grunt.initConfig({

        browserify: {
            buildTypeScript: {
                options: {
                    preBundleCB: function(bundle) {
                        bundle.plugin('tsify', {
                            removeComments: true,
                            noImplicitAny: false,
                            target: 'ES5'
                        });
                    },
                    // sourcemaps
                    browserifyOptions: {
                        debug: true
                    }
                },
                files: {
                    'web/assets/scripts/main.js': ['src/assets/scripts/main.ts']
                }
            }
        }

    });

    grunt.registerTask('default', [
        'browserify:buildTypeScript'
    ]);

};

NPM package.json for node modules used for the Gruntfile build

{
    "name": "Example",
    "version": "1.0.0",
    "browser": {
        "jquery": "./src/assets/vendor/jquery/dist/jquery.js"
    },
    "browserify-shim": {
        "jquery": "global:$"
    },
    "browserify": {
        "transform": [
            "browserify-shim"
        ]
    },
    "devDependencies": {
        "grunt": "^0.4.5",
        "grunt-browserify": "^4.0.1",
        "browserify-shim": "^3.8.11",
        "tsify": "^0.12.2",
        "jit-grunt": "^0.9.1"
    }
}

TypeScript ES6 Modules Library Setup

I maintain a library of code called StructureJS. I use the TypeScript library to generate the JavaScript one so that I only have one codebase. I suggest using grunt-ts and the umd module setting.

ts: {
    default: {
        src: ['ts/**/*.ts'],
        outDir: 'js/',
        options: {
            target: 'es5',
            module: 'umd',
            basePath: '',
            sourceMap: false,
            declaration: false,
            nolib: false,
            comments: true
        }
    }
}

You can see the actual usage here:
https://github.com/codeBelt/StructureJS/blob/master/Gruntfile.js

Full credit for this article goes to Peter Elst. I took a really old article of his and modified it to talk about TypeScript.

What is OOP

In object-oriented programming, developers often use the term “architecting an application.” This analogy is not far off the mark. You can approach any project as if you are its architect, and use object-oriented principles as building blocks to structure your code. As you develop your application, you can think of your code modules as the blueprints that form the foundation of your applications. Just as you can use one blueprint repeatedly to build similar structures, you can repurpose your code as needed to achieve your desired functionality.

The concept of classes is at the heart of all object-oriented code development. If you’re not already familiar with object-oriented programming (OOP), this article will get you started writing TypeScript classes. Writing classes has never been easier than with TypeScript. If you are new to working with TypeScript, you’ll find that writing classes allows you to create projects that are easier to manage and maintain.

The concepts covered in this article will help you begin writing more portable, reusable code and move beyond the world of procedural code.

What are classes?

Classes are nothing more than a collection of functions (called methods in this context) that provide a blueprint for any number of instances that are created from it. By changing some variables (or in OOP terminology, properties) of a class instance, or by passing different values as arguments to its methods, the same underlying class can have widely different outcomes.

The ability to generate multiple instances (that can appear and behave differently) from the same object is one of the reasons why classes are so powerful. Writing TypeScript classes promotes reusability because the functionality you create can be repurposed.

Let’s see how this looks in code:

class Brick {

    public color: string = 'red';

    constructor() {
        console.log(`new ${this.color} brick created`);
    }
}

export default Brick;

The Brick.ts class code above illustrates one of the most basic implementations of an TypeScript class. The class holds just a single method and property.

To use this class in another TypeScript we will need to import it and instantiate the class.

import Brick from './somepath/Brick';

const firstBrick: Brick = new Brick();

If you run the compiled TypeScript code which is JavaScript, you’ll see that the Console panel now displays “new red brick created” (see Figure 1).

Figure 1. Console panel of Brick class getting instantiated

The console message in the Console panel means that your TypeScript class is functioning correctly. Now it is time to start doing some more advanced things with classes.

Basic OOP concepts: Inheritance vs. composition

There are just a handful of concepts at the core of OOP. This article covers the most important ones: inheritance, encapsulation, and polymorphism. I also discuss a few related topics to help you put these ideas into context.

Without a doubt, inheritance is the most well-known principle of OOP. Inheritance can be defined as the ability to inherit properties and methods and extend the functionality of an existing class in a new one.

If you’re thinking ahead, you might imagine creating a new “Wall” class that extends the “Brick” class you created earlier. However, that is not how inheritance works.

Looking at the relationship between a brick and a wall, the best way to code this is not through inheritance but rather by a concept called composition.

A simple rule of thumb determines whether the relationship between classes is one that warrants inheritance or composition. If you can say class A “is a” class B, you’re dealing with inheritance. If you can say class A “has a” class B, the relationship is one of composition.

Here are some examples of inheritance:

• Cat “is an” animal
• Engineer “is an” employee
• Rugby “is a” sport

Here are examples of composition:

• Wall “has a” brick
• Computer “has a” keyboard
• School “has a” teacher

So what is the difference in how inheritance and composition are implemented? Let’s compare how this works, starting with inheritance:

class Animal {

    public furry: boolean;
    public domestic: boolean;

    constructor() {
        console.log('new animal created');
    }

}

export default Animal;

The Animal.ts class code above is the base Animal class, which you will now extend using inheritance with a Cat class:

import Animal from './somepath/Animal';

class Cat extends Animal {

    public family: string;

    constructor() {
        super();

        this.furry = true;
        this.domestic = true;
        this.family = 'feline';
    }
}

export default Cat;

If you look at the Cat.ts class, the constructor assigns values to three different properties. On close inspection, only one of these properties (family) is defined in the Cat class. The other properties (furry and domestic) come from the Animal base class.

While this not exactly the most practical example, you can see how class inheritance allows you to build upon existing functionality to create a new blueprint for you to start using as you develop your project.

Now if you wanted to create half a dozen cats, you could simply do this by instantiating the Cat class, which has all the properties already set up, rather than using the generic Animal class and having to define the properties again and again for each instance.

Currently in TypeScript there is no override keyword to override a method defined in the class that you extended. You just create a new method with the same name to override the one in the class you extended.

On the other hand, composition doesn’t have any formal syntax like the extends keyword. Composition simply instantiates its own instance of any class it wants to use.

Let’s take the Brick class created earlier. In this next example you’ll create a Wall class that uses composition to instantiate instances of the Brick class:

import Brick from './somepath/Brick';

export class Wall {

    public wallWidth: number = 0;
    public wallHeight: number = 0;

    constructor(w: number, h: number) {
        this.wallWidth = w;
        this.wallHeight = h;
        this.build();
    }

    public build(): void {
        for (var i: number = 0; i < this.wallHeight; i++) {
            for (var j: number = 0; j < this.wallWidth; j++) {
                var brick: Brick = new Brick();
            }
        }
    }
}

export default Wall;

In the code above, the Wall.ts class accepts two arguments passed to its constructor, defining the width and height in bricks of the wall you want to create.

Let’s do a quick test of this class by instantiating it:

import Wall from './somepath/Wall';

const myWall: Wall = new Wall(4, 4);

If you run the compiled TypeScript code which is JavaScript, you’ll see that 16 Brick instances are created with corresponding trace statements displayed in the Output panel to create a 4 x 4 wall (see Figure 2).

Output panel of Wall class getting executed Figure 2. Output panel of Wall class getting executed Apart from the difference in class relationship between inheritance and composition (as I discussed earlier), composition has the advantage of being able to add functionality to another class at runtime. It allows you to have control over the creation and destruction of class instances, whereas with inheritance the relationship between the classes is fixed and defined at the time the code is compiled.

Encapsulation

Now let’s move on to another important principle of OOP called encapsulation. The underlying concept of encapsulation deals with what methods and properties your class exposes to the outside world.

Up until this point you’ve always set methods and properties as public, but is that really what you’d want to do?

If you want your code to be stable, and if you want to develop projects that are least prone to bug and errors, you’ll want to restrict the ways in which other classes can interact with your code.

The key here is to only have those methods and properties available that are required as settings for the class, and restrict access to the rest. Using this approach, you’ll have a limited number of places in your code to debug when something goes wrong in the interaction with your class.

TypeScript includes the following keywords as access modifiers to methods and properties:

public

allows access from anywhere

private

can only be accessed within its own class

The keyword below is current not in TypeScript but I do hope it is added soon:

protected

can only be accessed within own class and subclasses

Let’s put this concept into practice. Take a look at the following example:

export class Person {

    private _age: number = 1;

    constructor() {

    }

    public get age(): number {
        return this._age;
    }

    public set age(val: number) {
        if (this._age > 0) {
            this._age = val;
        }
    }

}

export default Person;

Note: TypeScript supports getter and setter methods but some older browsers do not support the compiled JavaScript code. To learn more check out my TypeScript Getters Setters with TypeScript Accessor Tutorial.

The code example above shows a Person.ts class with a private property _age of a Number type. Even though you want to allow the age of the person to be set, you still opted not to use a public property here. Instead you are routing the age value through the use of a getter/setter method.

Getter/setter methods (as implemented in the previous example) appear as if they are properties, but they behave like methods.

When you set the age property, it calls the age setter method that assigns the value to the private _age property after validating it. In this case, you know that a person’s age can’t be a negative value.

The major advantage of this approach is that every time the age property is set, validation occurs because the age value is always routed through the setter function.

Polymorphism

The final concept I cover in this article is polymorphism. The concept behind polymorphism is based on the idea of different classes implementing the same method names.

Even though this is a very simple concept, polymorphism has some interesting implications. The first major advantage is that it allows classes to be interchangeable at runtime. There are no hard-coded references to specific method names for specific classes.

For example, imagine you have a Teacher class and a Student class. You could implement a teach method for the teacher and a study method for the student, but polymorphism allows you to write the code so that the two classes both implement a work method. Although a Teacher and Student class will clearly have a different implementation of a work method (one teaches, the other studies), you can use a shared generic method name, creating a single interface through which they can be accessed:

class Teacher {

    public work(): void {
        console.log('I am teaching');
    }

}

export default Teacher;

class Student {

    public work(): void {
        console.log('I am studying');
    }

}

export default Student;

Any class that gets passed an instance of either the Teacher.ts or Student.ts class does not need to do any type checking to determine whether it is dealing with a teacher or a student instance (or any other class implementing the same methods for that matter) but it can directly call the work method.

You can enforce polymorphism between classes through the use of something called interfaces. These are similar to classes in that they define a set of methods, but interfaces are different than classes because they do not have an implementation. Interfaces simply define a “contract” of the methods a class needs to implement in order to be valid.

Here’s an example of an interface called IWork:

interface IWork {
    work(): void;
}

export default IWork;

As you can see from the IWork.ts code above, an interface looks suspiciously like any other class. But there are a few differences. Most developers choose to name an interface name so that it begins with a capital I (a common naming convention for interfaces, although it is optional). Also, instead of a class keyword, interfaces use the interface keyword. Additionally, as you analyze the code, you’ll see that in the section where you would expect to see some code for the work method, only its method signature is defined.

The interface above requires that any class that implements it must have a method called work that has a return type of void.

Let’s see how the Teacher and Student class implement this interface:

import IWork from './somepath/IWork';

class Teacher implements IWork {

    public tenure: boolean;

    constructor() {
        this.tenure = true;
    }

    public work(): void {
        console.log("I am teaching");
    }

}

export default Teacher;

import IWork from './somepath/IWork';

class Student implements IWork {

    public averageGrade: number;

    constructor() {
        this.averageGrade = 4.07;
    }

    public work(): void {
        console.log('I am studying');
    }

}

export default Student;

That was easy. By simply adding the implements keyword, you now have set up both the Teacher.ts and Student.ts classes so that they are required to implement the work method. If you try removing or renaming the work method from either of the two classes, you’ll receive a compile-time error message.

By having classes all implement a common interface, the interface can actually be used as a data type. Let’s look at the following example:

import IWork from './somepath/IWork';

class Supervisor {

    constructor(worker: IWork) {
        worker.work();
    }

}

export default Supervisor;

In the example above, you have a Supervisor.ts class that can be passed an instance of a class implementing the IWork interface. In this way, the interface is being used as a data type.

The TypeScript compiler knows that any class instance implementing this IWork interface will have the work method defined. Therefore, it doesn’t complain about a possibly undefined method when the code is compiled.

import Supervisor from './somepath/Supervisor';
import Teacher from './somepath/Teacher';
import Student from './somepath/Student';

const supervisor1: Supervisor = new Supervisor(new Teacher());
const supervisor2: Supervisor = new Supervisor(new Student());

If you run the compiled TypeScript code which is JavaScript, you’ll see two lines appear in the Output panel. The first line displays “I’m teaching” and the second displays “I’m studying” (see Figure 3). These console.log statements are, of course, exactly what you’d expect by passing a new teacher and student instance to the Supervisor constructor.

Figure 3. Output panel of the Supervisor class using polymorphism

Type casting

That brings up the next question: What happens when you try to access class-specific methods or properties of Teacher or Student (other than the work method) that weren’t defined in the interface?

The Supervisor class uses the IWork data type for any instance that is passed to its constructor so if you were to call any other method, the compiler has no way of knowing whether that is implemented. The compiler will report an error.

You can work around this is by using something called type casting by converting the instance from this generic IWork data type back to the Teacher or Student instance.

The way this is accomplished is by using the instanceof keyword and the “as” keyword to cast the object:

import Teacher from './somepath/Teacher';
import Student from './somepath/Student';
import IWork from './somepath/IWork';

export class Supervisor {

    constructor(inst: IWork) {
        inst.work();

        if (inst instanceof Teacher) {
            const teacher = inst as Teacher;
            console.log('Has tenure:', teacher.tenure);
        }

        if (inst instanceof Student) {
            const student = inst as Student;
            console.log('Average grade is:', student.averageGrade);
        }
    }

}

export default Supervisor;

In the code above, the instanceof keyword checks whether the worker instance passed to the constructor is of the specific type Teacher or of the type Student.

If it is a teacher instance, you are able to type cast the instance to that specific class by using “as” keyword, so you can access its specific methods and properties. In this case you could, for example, have a Boolean tenure property set in the Teacher class.

The same holds true if we’re dealing with a student instance. If the is keyword confirms that you are working with a student, you can type cast the generic IWork instance to a student instance and access the averageGrade property.

This is a very useful behavior. You can see how using polymorphism in this way benefits your projects when you have a collection of classes that need to accept any number of data types, as long as they implement a common interface. When you need to get into the specific method implementations of the class implementing the interface, type casting makes this possible.

To check out an example of OOP and TypeScript check out an older post of mine Object Oriented Programming with TypeScript Tutorial.

Files for this example can be found at: https://gist.github.com/codeBelt/65a82e76597f2fb6c2af You can use the follow command to compile the example code:

tsc TestApp.ts -out app.js

Original Article written by Peter Elst (source)

In this TypeScript RequireJS tutorial I will show you how to setup AMD classes, setup your config file and how to use RequireJS plugins with TypeScript.

TypeScript AMD Classes

Below is how we setup a AMD class that we can use with RequireJS. The most important part is to have the export statement below the class itself and to equal the class you created.

// Base.ts file
class Base {

    constructor() {
    }

    public createChildren():void {

    }
}

export = Base;

Next we want to import that Base.ts AMD TypeScript class into another class. You can see below how we have an import statement that will bring in our Base class.

// TestApp.ts file
import Base = require("view/Base");

class TestApp extends Base {

    private _title:string = 'TypeScript AMD Boilerplate';

    constructor() {
        super();
    }

    public createChildren():void {

    }

}

export = TestApp;

Once you have your RequireJS config file setup to load jQuery then you can do the following in your classes. Later I will should my config file.

import $ = require("jquery");

RequireJS Plugins TypeScript

Seems like this is an undocumented TypeScript feature. Below is what you need to use RequireJS plugins like the text! plugin or in this example the Handlebars(hbs!) plugin:

/// <amd-dependency path="hbs!templates/topbar/TopNavigationTemplate" />
declare var require:(moduleId:string) => any;
var TopNavigationTemplate:Function = require('hbs!templates/topbar/TopNavigationTemplate');

If you need to add multiple plugins into the file you will need to put all the /// <amd-dependency path=”” /> above the require code like:

/// <amd-dependency path="hbs!templates/topbar/TopNavigationTemplate" />
/// <amd-dependency path="hbs!templates/login/LoginTemplate" />
declare var require:(moduleId:string) => any;
var TopNavigationTemplate:Function = require('hbs!templates/topbar/TopNavigationTemplate');
var LoginTemplate:Function = require('hbs!templates/login/LoginTemplate');

RequireJS Config & Bootstrap Classes

Here is my RequireJS config file(AppConfig.ts):

require.config({

    baseUrl: 'assets/scripts/',

    paths: {
        //main libraries
        jquery: '../vendor/jquery/jquery-1.9.1',

        //shortcut paths
        templates: '../templates',
        data: '../data',

        //require plugins
        text: '../vendor/require/text',
        tpl: '../vendor/require/tpl',
        json: '../vendor/require/json',
        hbs: '../vendor/require-handlebars-plugin/hbs'
    },

    shim: {
        jquery: {
            exports: '$'
        }
    }
});

And here is my main RequireJS file(AppBootstrap.ts) that kicks everything off:

/// <reference path="_declare/require.d.ts" />

///<reference path='AppConfig.ts'/>
///<reference path='TestApp.ts'/>

/**
 * Main entry point for RequireJS
 */
require(
    [
        'TestApp',
        'jquery'
    ],
    (TestApp, $) => {
        'use strict';

        $(document).ready(function () {
            var app = new TestApp();
            app.appendTo('body');
        });
    }
);

RequireJS TypeScript Example Files

Be sure to check out my TypeScript AMD(RequireJS) Example files to see how to setup an TypeScript application with RequireJS.

Final I figured out how to do both TypeScript AMD & CommonJS external modules and TypeScript Internal module classes. Hopefully you can get started right away with my examples below.

TypeScript External Modules Classes

Below is how to setup TypeScript AMD/CommonJS classes so they will output correctly. You can check out my TypeScript AMD(RequireJS) Example files to see how to setup an TypeScript application with RequireJS.

// TestApp.ts file
import Base = require("view/Base");

class TestApp extends Base {

    private _title:string = 'TypeScript AMD Boilerplate';

    constructor() {
        super();
    }

    public createChildren():void {

    }

}

export = TestApp;

Here is the Base.ts class that the TestApp.ts will extend.

// Base.ts file
import $ = require("jquery");

class Base {

    private _parent:JQuery = null;

    constructor() {
    }

    public createChildren():void {

    }

    public appendTo(selector:string):void {
        this._parent = $(selector);
        this.createChildren();
    }

}

export = Base;

TypeScript Internal Modules Classes

Below is how to setup TypeScript Internal classes so they will output correctly. This is the way I like to setup my TypeScript files. You can check out my TypeScript Internal Modules Example files to see how to setup an TypeScript application with regular classes.

///<reference path='_declare/jquery.d.ts'/>

///<reference path='view/Base.ts'/>

module namespace {

    export class TestApp extends Base {

        private _title:string = 'TypeScript Boilerplate';

        constructor() {
            super();
        }

        public createChildren():void {

        }

    }
}

Here is the Base.ts class that the TestApp.ts will extend.

module namespace {

    export class Base {

        private _parent:JQuery = null;

        constructor() {
        }

        public createChildren():void {

        }

        public appendTo(selector:string):void {
            this._parent = $(selector);
            this.createChildren();
        }

    }
}

If you want to learn more about TypeScript Namespace with Internal Modules check out this other post.

Go ahead and leave comments because I know people are trying to figure this out and I think this is the way to do TypeScript Internal and External Modules.

• TypeScript Cheat Sheet
• The Definitive TypeScript Guide
• TypeScript Handbook
• TypeScript Wiki

Also checkout my TypeScript Tutorials.

Being a former ActionScript developer, TypeScript is the next best thing and I wanted to share my TypeScript workflow. This is not a TypeScript workflow for Visual Studio. My IDE of choice is WebStorm/PhpStorm and they both have great TypeScript support.

Let Something Else Do The Grunt Work

My whole TypeScript workflow is handle by GruntJS and several Grunt plugins. Before we go over the Grunt plugins. I want to talk about the three Grunt Tasks in My TypeScript Workflow.

Development Task (src folder)

grunt – This task will compile our TypeScript files, Handlebar Template files and any JSON files we want converted into JavaScript. It will also create a index.html specifically for our development environment and starts up a node.js server for us to start working with files that are located in the development “src” folder.

Production Task (web folder)

grunt web – This task will do what the above Development Task does plus it will concatenate and minify our CSS & JavaScript files, prepends a comment block in our minified files, copies only the necessary files from the development folder to the production folder, creates a specific index.html file for our production environment and starts up a node.js server for us to start testing files that are located in the development “web” folder.

Documentation Generating Task (docs folder)

grunt doc – This task will create YUIDoc‘s from our code comments in the TypeScript files.

Example Code Files

Checkout my TypeScript Boilerplate example code to get started with the TypeScript Workflow and GruntJS. Make sure to checkout the Gruntfile.js file to see all the tasks.

If you have node.js and gruntjs installed you should only have to type the two following commands when in the root of the downloaded files:

• sudo npm install
• grunt

Grunt Plugins

grunt-env & grunt-preprocess

These two plugins work together to create an index.html file for both our development and production environment. It will take the config.html file and include/exclude section that we have outlined.

grunt-json

This plugin will take your JSON files and convert them into JavaScript files. For example if you had a JSON file that had a list of all countries that was never going to change. You could eliminate that HTTP request by making the file JavaScript and minifing it together with your other JavaScript code. You can read more about this on my Compile JSON files into Javascript Tutorial.

grunt-contrib-handlebars

This plugin will take your Handlebar Templates and Partials and precompile them into JavaScript for a performance boost. If you like to use Underscore Templates you can check out my Precompiling JavaScript Underscore Templates Tutorial.

grunt-typescript

This plugin will take your TypeScript files and compile them into JavaScript. It will also create sourcemaps for the TypeScript files. You can read more about this in my TypeScript Source Maps Example and/or TypeScript Source Maps After Uglify tutorials.

grunt-contrib-clean

This plugin will delete all the files in the production (web) folder so when we do another build for production we know there are no extra files from a previous build that were removed.

grunt-contrib-copy

This plugin will copy specified files from the development folder into the production folder so we don’t have to add files manually every time we do a build to production.

grunt-usemin

This plugin has two parts to it and maybe confusing at first. It also requires the grunt-contrib-concat, grunt-contrib-uglify & grunt-contrib-cssmin plugins. The two parts are:

useminPrepare

The useminPrepare part of the usemin plugin looks at the html file and checks for a build:js or build:css code block. It will take those files found in the code block(s) and concat them together and then runs uglify for js and/or cssmin for css files. useminPrepare requires grunt-contrib-uglify, grunt-contrib-concat, and grunt-contrib-cssmin plugins to be installed. Which is listed in the package.json file.

usemin

The usemin part will remove the code block(s) and replace that area with the single file path in the html file.

grunt-banner

This plugin allows you to prepend or append comments to files. I prepend the version number and date to my minified files whenever I do a production build.

grunt-manifest

The plugin allow you to create a Application Cache Manifest file from select folders and file types. This is only needed if you are making an application that needs to work offline.

grunt-express & grunt-open

These two plugins will creates a node.js Express Server to test our code in a server like environment and will open the index.html file in our default browsers.

grunt-contrib-watch

This plugin allows you to watch certain files and if they change it will kick off other tasks. In this TypeScript Workflow I watch the TypeScript and Handlebar files and have them re-compile every time I save my edits.

grunt-contrib-yuidoc

This plugin will generate YUIDoc’s from the yuidoc comments in your code files.

The Gruntfile.js File

module.exports = function(grunt) {

    // Load Grunt tasks declared in the package.json file.
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    // Project configuration.
    grunt.initConfig({

        /**
         * This will load in our package.json file so we can have access
         * to the project name and appVersion number.
         */
        pkg: grunt.file.readJSON('package.json'),

        /**
         * Constants for the Gruntfile so we can easily change the path for our environments.
         */
        BASE_PATH: '',
        DEVELOPMENT_PATH: 'src/',
        PRODUCTION_PATH: 'web/',

        /**
         * A code block that will be added to our minified code files.
         * Gets the name and appVersion and other info from the above loaded 'package.json' file.
         * @example <%= banner.join("\\n") %>
         */
        banner: [
                 '/*',
                 '* Project: <%= pkg.name %>',
                 '* Version: <%= pkg.appVersion %> (<%= grunt.template.today("yyyy-mm-dd") %>)',
                 '* Development By: <%= pkg.developedBy %>',
                 '* Copyright(c): <%= grunt.template.today("yyyy") %>',
                 '*/'
        ],

        /**
         * The different constant names that will be use to build our html files.
         * @example <!-- @if NODE_ENV == 'DEVELOPMENT' -->
         */
        env: {
            src: {
                NODE_ENV : 'DEVELOPMENT'
            },
            web : {
                NODE_ENV : 'PRODUCTION'
            }
        },

        /**
         * Allows us to pass in variables to files that have place holders so we can similar files with different data.
         * This plugin works with the 'env' plugin above.
         * @example <!-- @echo appVersion --> or <!-- @echo filePath -->
         */
        preprocess : {
            // Task to create the index.html file that will be used during development.
            // Passes the app version and creates the /index.html
            src : {
                src : '<%= DEVELOPMENT_PATH %>' + 'config.html',
                dest : '<%= DEVELOPMENT_PATH %>' + 'index.html',
                options : {
                    context : {
                        appVersion : '<%= pkg.appVersion %>',
                        filePath: ''
                    }
                }
            },
            // Task to create the index.html file that will be used in production.
            // Passes the app version and creates the /index.html
            web : {
                src : '<%= DEVELOPMENT_PATH %>' + 'config.html',
                dest : '<%= PRODUCTION_PATH %>' + 'index.html',
                options : {
                    context : {
                        appVersion : '<%= pkg.appVersion %>',
                        filePath: ''
                    }
                }
            }
        },

        /**
         * Cleans or deletes our production folder before we create a new production build.
         */
        clean: {
            dist: ['<%= PRODUCTION_PATH %>']
        },

        /**
         * Copies certain files over from the development folder to the production folder so we don't have to do it manually.
         */
        copy: {
            web:  {
                files: [
                    // Copy favicon.ico file from development to production
                    { expand: true, cwd: '<%= DEVELOPMENT_PATH %>', src: 'favicon.ico', dest: '<%= PRODUCTION_PATH %>' },
                    // Copy the media folder from development to production
                    { expand: true, cwd: '<%= DEVELOPMENT_PATH %>', src: ['assets/media/**'], dest: '<%= PRODUCTION_PATH %>' },
                    // Copy the index.html file from development to production
                    { expand: true, cwd: '<%= DEVELOPMENT_PATH %>', dest: '<%= PRODUCTION_PATH %>', src: ['index.html'], filter: 'isFile', dot: true }
                ]
            }
        },

        /**
         * Prepends the banner above to the minified files.
         */
        usebanner: {
            dist: {
                options: {
                    position: 'top',
                    banner: '<%= banner.join("\\n") %>',
                    linebreak: true
                },
                files: {
                    src: [
                        '<%= PRODUCTION_PATH %>' + 'assets/scripts/app.min.js',
                        '<%= PRODUCTION_PATH %>' + 'assets/styles/app.min.css'
                    ]
                }
            }
        },

        /**
         * Turns any JSON files into JavaScript files.
         */
        json: {
            web: {
                options: {
                    namespace: 'JSON_DATA',
                    includePath: false,
                    processName: function(filename) {
                        return filename.toLowerCase();
                    }
                },
                src: ['<%= DEVELOPMENT_PATH %>' + 'assets/data/**/*.json'],
                dest:  '<%= DEVELOPMENT_PATH %>' + 'assets/scripts/compiled/json.js'
            }
        },

        /**
         * Compiles the Handlebars templates into Javascript.
         * http://handlebarsjs.com/
         */
        handlebars: {
            compile: {
                options: {
                    namespace: 'JST',
                    // Registers all files that start with '_' as a partial.
                    partialRegex: /^_/,
                    // Shortens the file path for the templates.
                    processName: function(filename) {
                        return filename.slice(filename.indexOf("template"), filename.length);
                    },
                    // Shortens the file path for the partials.
                    processPartialName: function(filePath) {
                        return filePath.slice(filePath.indexOf("template"), filePath.length);
                    }
                },
                files: {
                    '<%= DEVELOPMENT_PATH %>assets/scripts/compiled/templates.tmpl.js': ['<%= DEVELOPMENT_PATH %>' + 'assets/templates/**/*.hbs']
                }
            }
        },

        /**
         * Compiles the TypeScript files into one JavaScript file.
         */
        typescript: {
            main: {
                src: ['<%= DEVELOPMENT_PATH %>' + 'assets/scripts/TestApp.ts'],
                dest: '<%= DEVELOPMENT_PATH %>' + 'assets/scripts/compiled/app.js',
                options: {
                    target: 'es3', //or es5
                    base_path: '',
                    sourcemap: true,
                    declaration: false,
                    nolib: false,
                    comments: false
                }
            }
        },

        /**
         * The useminPrepare part of the usemin plugin looks at the html file and checks for a build:js or build:css code block.
         * It will take those files found in the code block(s) and concat them together and then runs uglify for js and/or cssmin for css files.
         * useminPrepare requires grunt-contrib-uglify, grunt-contrib-concat, and grunt-contrib-cssmin plugins to be installed. Which is listed in the package.json file.
         *
         * The usemin part will remove the code block(s) and replace that area with the single file path in the html file.
         */
        useminPrepare: {
            html: ['<%= DEVELOPMENT_PATH %>' + 'index.html'],
            options: {
                dest: '<%= PRODUCTION_PATH %>'// Moves the single concatenated files to production.
            }
        },
        usemin: {
            html: ['<%= PRODUCTION_PATH %>' + 'index.html'],
            options: {
                dirs: ['<%= PRODUCTION_PATH %>']
            }
        },

        /**
         * Removes all comments from the production index.html file. I can also remove all whitespace if desired.
         */
        htmlmin: {
            dist: {
                options: {
                    removeComments: true,
                    collapseWhitespace: false
                },
                files: {
                    '<%= PRODUCTION_PATH %>index.html': '<%= PRODUCTION_PATH %>' + 'index.html'
                }
            }
        },

        /**
         * Creates a Cache Manifest file.
         */
        manifest: {
            generate: {
                options: {
                    basePath: '<%= PRODUCTION_PATH %>',
                    exclude: [
                        'assets/media/images/moblie-icons/icon-144x144.png',
                        'assets/media/images/moblie-icons/icon-100x100.png',
                        'assets/media/images/moblie-icons/icon-29x29.png',
                        'assets/media/images/moblie-icons/icon-50x50.png',
                        'assets/media/images/moblie-icons/icon-58x58.png',
                        'assets/media/images/moblie-icons/icon-72x72.png'
                    ],
                    preferOnline: false,
                    verbose: true,
                    timestamp: true,
                    master: []
                },
                src: [
                    'assets/data/**/*.json',
                    'assets/media/images/**/*.jpg',
                    'assets/media/images/**/*.png',
                    'assets/scripts/**/*.js',
                    'assets/styles/**/*.css'
                ],
                dest: '<%= PRODUCTION_PATH %>' + 'offline.appcache'
            }
        },

        /**
         * YUIDoc plugin that will generate documentation from our YUI comments.
         */
        yuidoc: {
            compile: {
                name: '<%= pkg.name %>',
                description: '<%= pkg.description %>',
                version: '<%= pkg.appVersion %>',
                url: '<%= pkg.homepage %>',
                options: {
                    paths: '<%= DEVELOPMENT_PATH %>' + 'assets/scripts/',
                    outdir: '<%= BASE_PATH %>docs',
                    themedir: '',
                    extension: '.ts',                                   // Default '.js' <comma-separated list of file extensions>
                    exclude: ''
                }
            }
        },

        /**
         * Creates a node.js Express Server to test our code in a server like environment.
         * Note: We are using the watch task to keep the server running.
         */
        express: {
            src: {
                options: {
                    port: 8000,
                    hostname: "0.0.0.0",
                    bases: ['<%= DEVELOPMENT_PATH %>'],
                    livereload: true
                }
            },
            web: {
                options: {
                    port: 8001,
                    hostname: "0.0.0.1",
                    bases: ['<%= PRODUCTION_PATH %>'],
                    livereload: true
                }
            }
        },

        /**
         * Opens the index.html file in the default browser after the node.js Express Server is running.
         */
        open: {
            src: {
                // Gets the port from the connect configuration
                path: ' express.src.options.port%>'
            },
            web: {
                // Gets the port from the connect configuration
                path: ' express.web.options.port%>'
            }
        },

        /**
         * Watches files and will run task(s) when files are changed. It will also reload/refresh the browser.
         */
        watch: {
            css: {
                options: {
                    livereload: true
                },
                files: [
                    '<%= DEVELOPMENT_PATH %>' + 'assets/styles/**/*.css',
                ]
            },
            src: {
                options: {
                    livereload: true
                },
                files: [
                    '<%= DEVELOPMENT_PATH %>' + 'assets/scripts/**/*.ts',
                    '<%= DEVELOPMENT_PATH %>' + 'config.html',
                    '<%= DEVELOPMENT_PATH %>' + 'assets/templates/**/*.hbs'
                ],
                tasks: ['src']
            }
        }

    });

    /**
     * Grunt tasks:
     *
     * grunt        (Will build and run your development code/server)
     * grunt web    (Will build and run your production code/server)
     * grunt doc    (Will generate the YUI documentation from the code comments)
     */
    grunt.registerTask('default', [
        'server'
    ]);

    grunt.registerTask('server', [
        'src',
        'express:src',
        'open:src',
        'watch'
    ]);

    grunt.registerTask('src', [
        'env:src',
        'preprocess:src',
        'json',
        'handlebars',
        'typescript'
    ]);

    grunt.registerTask('web', [
        'env:web',
        'preprocess',
        'json',
        'handlebars',
        'typescript',
        'clean',
        'copy',
        'useminPrepare', 'concat', 'uglify', 'cssmin',
        'usemin',
        'usebanner',
        'htmlmin',
        'manifest',
        'open:web',
        'express:web',
        'express-keepalive'
    ]);

    grunt.registerTask('doc', [
        'yuidoc'
    ]);

};

I am going to take my first TypeScript Source Maps Example a step future. I am going to take our compiled TypeScript code and then use UglifyJS to minify it. UglifyJS will also create a new source map for the minified version of the code.

I am going to assume you have read my first TypeScript Source Maps Example and know how to use GruntJS to compile TypeScript classes.

Here is part of my Gruntfile that does all the work for us:

grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    typescript: {
        base: {
            src: ['../ts/Man.ts'],
            dest: '../js/main.js',
            options: {
                sourcemap: true,
                declaration: false
            }
        }
    },

    uglify: {
        dist: {
            options: {
                // Reference to the source map TypeScript created.
                sourceMapIn: '../js/main.js.map',
                // Creates our new source map after minifying.
                sourceMap: '../js/main.min.map',
                // The root folder where the TypeScript live.
                sourceMapRoot: '../ts/'
            },
            files: {
                '../js/main.min.js': ['../js/main.js']
            }
        }
    }

});

You can download all the TypeScript Source Maps with Uglify example files here and try it out:
https://github.com/codeBelt/Grunt-TypeScript-Source-Map-to-JavaScript-with-Uglify

In the code I created a JavaScript object and tried console logging a property that didn’t exist on it.

var obj:any = {};
console.log( obj.property.anotherProperty );

If you look at the Console tab you will see the error. Also notice that Person.ts:16 is being referenced in the output. Clicking on that file name will take you straight to the TypeScript file.

As you can see Google Chrome maps the TypeScript source file with the error. Awesome!

You can download the TypeScript Source Maps example files here: https://github.com/codeBelt/TypeScript-Source-Maps

Grunt JS To Compile TypeScript Code

I used GruntJS to compile my TypeScript code. If you have never used GruntJS before you probably need to checkout my Install Grunt JS on a Mac Tutorial or Install Grunt JS on Windows Tutorial.

In this TypeScript tutorial I will go over how to generate code documents from your TypeScript files. We will be using YUIDoc’s and GruntJS.

Grunt JS Setup

If you have never used GruntJS before you will need to checkout my Install Grunt JS on a Mac Tutorial or Install Grunt JS on Windows Tutorial.

Example Code

To follow along with this tutorial you may want to download the files from https://github.com/codeBelt/Example-TypeScript-Generate-Documentation and click the “Download Zip” button.

Package File

Lets look how I setup the package.json file in the _build folder. This file will install Grunt and Grunt plugins locally for our project. All we have to do to install grunt and the YUIDoc plugin is type npm install in Terminal or the Command Prompt when inside the _build folder.

{
    "name": "TypeScript-Generate-Documentation",
    "version": "0.1.0",
    "description": "Create documentation from TypeScript files",
    "url": "https://codebelt.github.io/blog",/
    "developedBy": "codeBelt",

    "devDependencies": {
        "grunt": "~0.4.1",
        "grunt-contrib-yuidoc": "*"
    }
}

Grunt File

Below is our Grunt file.You can add more plugins when you need but if you look we have only one ‘yuidoc’. One thing you need to do is set the extension option to ‘.ts’. The plugin will look for all files with the ‘.ts’ extension and generate documentation from those TypeScript files.

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({

        // This will load in our package.json file so we can have access
        // to the project name and version number.
        pkg: grunt.file.readJSON('package.json'),

        // Constants for the Gruntfile so we can easily change the path for
        // our environments.
        BASE_PATH: '../',
        DEVELOPMENT_PATH: '../dev/',

        // The YUIDoc plugin to generate documentation for code files.
        yuidoc: {
            compile: {
                name: '<%= pkg.name %>',
                description: '<%= pkg.description %>',
                version: '<%= pkg.version %>',
                url: '<%= pkg.homepage %>',
                options: {
                    extension: '.ts',                               // Default '.js' <comma-separated list of file extensions>
                    paths: '<%= DEVELOPMENT_PATH %>' + 'scripts/',
                    outdir: '<%= BASE_PATH %>' + 'docs/'
                }
            }
        }

    });

    // These plugins provide necessary tasks.
    grunt.loadNpmTasks('grunt-contrib-yuidoc');

    // Default task.
    grunt.registerTask('default', ['yuidoc']);

};

Once you have your package.json and Gruntfile.js setup you can navigate with Terminal or the Command Prompt to the _build folder and type the command below to generate the TypeScript documentation:

grunt

If you want to get a good overview of YUIDoc check out Documenting JavaScript with YUIDoc. You can also checkout the office YUIDoc Syntax Reference.

One thing I wanted to point out. You will see the tag below in the DisplayObject class. The @overridden is not a valid YUIDoc tag but I use it so I know what properties or methods Inherited the same comment blocks from other extended classes.

@overridden EventDispatcher.CLASS_NAME

Here is the DisplayObject class example with YUIDoc comments. You can download the files above and checkout the other classes with YUIDoc comments.

///<reference path='../events/EventDispatcher.ts'/>

/**
 * The {{#crossLink "DisplayObject"}}{{/crossLink}} class is the base class for all objects that can be placed on the display list.
 *
 * @class DisplayObject
 * @extends EventDispatcher
 * @constructor
 **/
class DisplayObject extends EventDispatcher
{
    /**
     * @overridden EventDispatcher.CLASS_NAME
     */
    public CLASS_NAME:string = 'DisplayObject';

    /**
     * The isEnabled property is used to keep track of the enabled start of the DisplayObject.
     *
     * @property isEnabled
     * @type {boolean}
     * @default false
     * @protected
     */
    public isEnabled:boolean = false;

    /**
     * The isCreated property is used to keep track if it is the first time this DisplayObject is created.
     *
     * @property isCreated
     * @type {boolean}
     * @default false
     * @protected
     */
    public isCreated:boolean = false;

    /**
     * Returns the number of children of this object.
     *
     * @property numChildren
     * @type {init}
     * @default 0
     * @readonly
     */
    public numChildren:number = 0;

    /**
     * A reference to the child DisplayObject instances to this parent object instance.
     *
     * @property children
     * @type {array}
     * @readonly
     */
    public children:DisplayObject[] = [];

    constructor()
    {
        super();
    }

    /**
     * The createChildren function is intended to provide a consistent place for the creation and adding
     * of children to the view. It will automatically be called the first time that the view is added
     * to another DisplayObject. It is critical that all subclasses call the super for this function in
     * their overridden methods.
     *
     * @method createChildren
     * @override
     * @public
     */
    public createChildren():void
    {
        // JavaScript Code ...
    }

    /**
     * Adds a child DisplayObject instance to this parent object instance. The child is added to the front (top) of all other
     * children in this parent object instance. (To add a child to a specific index position, use the addChildAt() method.)
     *
     * If you add a child object that already has a different parent, the object is removed from the child
     * list of the other parent object.
     *
     * @method addChild
     * @param child {DisplayObject} The DisplayObject instance to add as a child of this DisplayObjectContainer instance.
     * @returns {DisplayObject} The DisplayObject instance that you pass in the child parameter.
     */
    public addChild(child:DisplayObject):DisplayObject
    {
        // JavaScript Code ...
    }

    /**
     * Removes the specified child object instance from the child list of the parent object instance.
     * The parent property of the removed child is set to null , and the object is garbage collected if no other references
     * to the child exist. The index positions of any objects above the child in the parent object are decreased by 1.
     *
     * @method removeChild
     * @param child {DisplayObject} The DisplayObject instance to remove.
     * @returns {DisplayObject} The DisplayObject instance that you pass in the child parameter.
     * @public
     */
    public removeChild(child:DisplayObject):DisplayObject
    {
        // JavaScript Code ...
    }

    /**
     * Removes all child DisplayObject instances from the child list of the DisplayObjectContainer instance.
     * The parent property of the removed children is set to null , and the objects are garbage collected if
     * no other references to the children exist.
     *
     * @method removeChildren
     * @returns {DisplayObject}
     */
    public removeChildren():DisplayObject
    {
        // JavaScript Code ...
    }

    /**
     * Adds a child DisplayObject instance to this DisplayObjectContainer instance.
     * The child is added at the index position specified. An index of 0 represents the back
     * (bottom) of the display list for this DisplayObjectContainer object.
     *
     * @method addChildAt
     * @param child {DisplayObject} The DisplayObject instance to add as a child of this object instance.
     * @param index {int} The index position to which the child is added. If you specify a currently occupied index position, the child object that exists at that position and all higher positions are moved up one position in the child list.
     * @returns {DisplayObject} The DisplayObject instance that you pass in the child parameter.
     */
    public addChildAt(child:DisplayObject, index:number):DisplayObject
    {
        // JavaScript Code ...
    }

    /**
     * Returns the child display object instance that exists at the specified index.
     *
     * @param index {int} The index position of the child object.
     * @returns {DisplayObject} The child display object at the specified index position.
     */
    public getChildAt(index:number):DisplayObject
    {
        // JavaScript Code ...
    }

    /**
     * The enable method is responsible for enabling all event listeners and enabling children of the view.
     *
     * @method enable
     * @public
     */
    public enable():void
    {
        // JavaScript Code ...
    }

    /**
     * The disable method is responsible for disabling all event listeners and disabling children of the view.
     *
     * @method disable
     * @public
     */
    public disable():void
    {
        // JavaScript Code ...
    }

    /**
     * The layoutComponent method provides a common function to handle updating child objects.
     *
     * @method layoutChildren
     */
    public layoutChildren():void
    {
        // JavaScript Code ...
    }

    /**
     * The purpose of the destroy method is to make an object ready for garbage collection. This
     * should be thought of as a one way function. Once destroy is called no further methods should be
     * called on the object or properties accessed. It is the responsibility of those who implement this
     * function to stop all running Timers, all running Sounds, remove any event
     * listeners and take any other steps necessary to make an object eligible for garbage collection.
     * It is critical that all subclasses call the super for this function in their overridden methods.
     *
     * @method destroy
     */
    public destroy():void
    {
        // JavaScript Code ...
    }

}

Leave me a comment, I love comments.

Here is the template. Notice the ${Name} placeholder. That will place the name of the file you typed in.

///<reference path=''/>
 
/**
 * YUIDoc_comment
 *
 * @class ${NAME}
 * @constructor
 **/
class ${NAME} {
 
    public CLASS_NAME:string = '${NAME}';
 
    constructor() {
    
    }
    
}

To create a new file template in PhpStrom/WebStorm you can right click on any folder in your project and hover over New and click Edit File Templates… .

Now click the green plus button top left and name in TypeScript Class and copy the snippet above and paste it in. Click OK and you are ready to go.

Now you can right click and select New and then new TypeScript Class template you created.

You also can get this and other snippets at https://gist.github.com/codeBelt/8025959

Thanks to the post below I was able to fix the issue.
http://stackoverflow.com/questions/17201854/jquery-definition-screwed-up-with-typescript-0-9

I am not sure why the office TypeScript jQuery sample doesn’t have to right jquery.d.ts definitions but you can get it here:
https://github.com/borisyankov/DefinitelyTyped/blob/master/jquery/jquery.d.ts

There are lots of tutorials out there that are good “What is TypeScript” but I just wanted to show some simple examples how TypeScript is similar and different from native JavaScript.

Note: These first couple of examples are not using any TypesScript type annotations but will still compile fine.

Single Class Example

JavaScript Example:

var Person = function(name, age) {
    this.name = name;
    this.age = age;
};

Person.prototype.getDescription = function () {
    return this.name + " is " + this.age + " years old.";
};

TypeScript Example:

class Person {

    name;
    age;

    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    getDescription() {
        return this.name + " is " + this.age + " years old.";
    }

}

Below how we would use these examples:

var person = new Person("Robert", 35);
console.log(person.getDescription());
//Robert is 35 years old

As you can see TypeScript is JavaScript but with a few conventions on how to create a class, always having a “constructor” method and not using the function word. With TypeScript you don’t need type annotation on properties(variables) and methods(functions) but it will come in handy when you start working in large projects and have an IDE that supports TypeScript. Later I will show you the TypeScript code with full type annotations but first I want to compare extending classes between JavaScript and TypeScript.

Extending Classes Example

JavaScript Example:

//Person Class
var Person = function(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.getDescription = function() {
    return this.name + " is " + this.age + " years old";
}


//Man Class
var Man = function(name, age) {
    Person.prototype.constructor.call(this, name, age);
}

Man.prototype = new Person();
Man.prototype.constructor = Man;

Man.prototype.getDescription = function() {
    var originalDescription = Person.prototype.getDescription.call(this);
    return originalDescription + " and is a man";
}

TypeScript Example:

//Person Class
class Person {

    name;
    age;

    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    getDescription() {
        return this.name + " is " + this.age + " years old.";
    }

}

//Man Class
class Man extends Person {

    constructor(name, age) {
        super(name, age);
    }

    getDescription() {
        var originalDescription = super.getDescription();
        return originalDescription + " and is a man";
    }

}

Below how we would use these examples:

var man = new Man("Robert", 35);
console.log(man.getDescription());
//Robert is 35 years old and is a man

TypeScript Example with Type Annotations

Below is the TypeScript class with type Annotations to help developers and IDE’s determine what type of data can be assigned to a property or passed to a methods. The beauty is if you have an IDE like WebStorm 6/PhpStorm 6 you can get code completion and accurate refactoring.

//Person Class
class Person {

    public name:string;
    public age:number;

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

    public getDescription():string {
        return this.name + " is " + this.age + " years old.";
    }

}

//Man Class
class Man extends Person {

    constructor(name:string, age:number) {
        super(name, age);
    }

    public getDescription():string {
        var originalDescription:string = super.getDescription();
        return originalDescription + " and is a man";
    }

}

To get started with TypeScript check out my OOP TypeScript Tutorial. Be sure to check out all of my TypeScript Tutorials.

Below is a simple example how you can make a score manager for a game with TypeScript and the Singleton pattern.

class SingletonClass {

    private static _instance:SingletonClass = new SingletonClass();

    private _score:number = 0;

    constructor() {
        if(SingletonClass._instance){
            throw new Error("Error: Instantiation failed: Use SingletonDemo.getInstance() instead of new.");
        }
        SingletonClass._instance = this;
    }

    public static getInstance():SingletonClass
    {
        return SingletonClass._instance;
    }

    public setScore(value:number):void
    {
        this._score = value;
    }

    public getScore():number
    {
        return this._score;
    }

    public addPoints(value:number):void
    {
        this._score += value;
    }

    public removePoints(value:number):void
    {
        this._score -= value;
    }

}

Then anywhere in your other classes you would get access to the Singleton by:

var scoreManager = SingletonClass.getInstance();
scoreManager.setScore(10);
scoreManager.addPoints(1);
scoreManager.removePoints(2);
console.log( scoreManager.getScore() );

Example Code

You can download the files from https://github.com/codeBelt/Example-TypeScript-Singleton-Pattern. Click the “Download Zip” button.

Please leave a comment if you find this TypeScript tutorial useful.

In this TypeScript tutorial I will be going over TypeScript Getters and Setters which are called TypeScript Accessor.

To get TypeScript Accessor’s working we need to let the compiler know we want to export the code as ECMAScript 5 compliant. Below is the TypeScript command:

 
tsc --target ES5 example.ts

Below you will notice that there are two methods named “name”. Notice the “get” and “set” in front of the methods. You don’t need to put the “public” in front of the “get” and “set” but I think it looks better.

 
class Person {

    private _name:string = null;

    constructor() {

    }

    public get name():string
    {
        return "The person name is " + this._name;
    }

    public set name(value:string)
    {
        this._name = value;
    }

}

On a side note, you will get a compiler error if you put a return type of :void on the set method. I think putting :void as the return type would and should be ok.

In our Main.ts class you can see how we set and get the data for the Person.ts class.

 
///<reference path='Person.ts'/>

class Main {

    private _personOne:Person = null;
    private _personTwo:Person = null;

    constructor()
    {
        this._personOne = new Person();
        this._personOne.name = "Tim";

        this._personTwo = new Person();
        this._personTwo.name = "Mark";

        console.log(this._personOne.name);
        console.log(this._personTwo.name);
    }

}

Like I said above we need to compile this out as ECMAScript 5 compliant or the compiler will complain. Here is our TypeScript compiler command.

 
tsc --target ES5 Main.ts -out ../../deploy/app.js

Below you will see the exported code for the Person.ts class. Notice the Object.defineProperty and that is how we can have getters and setters in JavaScript.

 
var Person = (function () {
    function Person() {
        this._name = null;
    }
    Object.defineProperty(Person.prototype, "name", {
        get: function () {
            return "The person name is " + this._name;
        },
        set: function (value) {
            this._name = value;
        },
        enumerable: true,
        configurable: true
    });
    return Person;
})();

You can check what browsers support Object.defineProperty here: http://kangax.github.com/es5-compat-table/.

Below you can download the TypeScript tutorial example files. Also if you like this tutorial please provide a link back to this page or my site.

So I’ve playing around with the TypeScript Arrow Function Expression. In this TypeScript tutorial I will show you a couple of examples using Arrow Functions.

Below you will see some normal JavaScript where we create an Image Object. We pass in an anonymous function to be called by the Image Object’s “onload” event but we also want to call another “onImageLoad” function within the same scope as the Image Object. To do this we create a variable called “self” to hold a reference to the Main class scope and pass it into the “onload” function so we can call “self.onImageLoad(event);”. Hope that makes sense. In the next example I will show you how to change the code to use TypeScript’s Arrow Function.

 
class Main {

    private _image:HTMLImageElement = null;

    constructor(path:string)
    {
        var self = this;
        this._image = new Image();
        this._image.onload = function(event) {
            self.onImageLoad(event);
        }
        this._image.src = path;
    }

    private onImageLoad(event):void
    {
        console.log("onImageLoad");
    }
}

If you look below we have removed the variable called self and now we are not passing in an anonymous function to the “onload” event. We are passing in (event) => {…} and that is the arrow => function. If there are no arguments being sent then the Arrow function would look like () => {…}. Now notice that we are calling “this.onImageLoad(event);” with a this and not a self. That’s about it.

 
class Main {

    private _image:HTMLImageElement = null;

    constructor(path:string)
    {
        this._image = new Image();
        this._image.onload = (event) => {
            this.onImageLoad(event);
        }
        this._image.src = path;
    }

    private onImageLoad(event):void
    {
        console.log("onImageLoad");
    }
}

“Arrow function expressions are a compact form of function expressions that omit the function keyword and have lexical scoping of this.” Basically the Arrow Function helps you retain a certain scope automatically. If you look at the outputted code from the compiler, it just creates a var _this = this; and it is used inside the function.

Below is what the Arrow Function will be compiled out to. Notice the var _this = this.

 
var Main = (function () {
    function Main(path) {
        var _this = this;
        this._image = null;
        this._image = new Image();
        this._image.onload = function (event) {
            _this.onImageLoad(event);
        };
        this._image.src = path;
    }
    Main.prototype.onImageLoad = function (event) {
        console.log("onImageLoad");
    };
    return Main;
})();

jQuery and TypeScript Arrow Functions

On to the second example. Not sure if we need another one but I wrote this code as the original example.

First thing is we need to bring in our jQuery declaration (jquery-1.8.d.ts) file. The below example is a common way to setup a jQuery object with click handlers. We have an anonymous funciton with some sample code inside. With larger project I do not like doing it this way because the code becomes hard to read and manage.

 
///<reference path='_declare/jquery-1.8.d.ts'/>

class Main {

    private TIME_TEXT:string = "Timer is complete.";//Constant

    constructor()
    {
        var self = this;
        $(".js-alert-link").on("click", function(event){
            var referenceToATag = this;
            var $referenceToATag = $(this);

            setTimeout(function() {
                self.timerComplete();
            }, 100);
        });
    }

    private timerComplete():void
    {
        alert(this.TIME_TEXT);
    }

}

Typically what I like to do is create a function within the class and bind the function call. Hope you see the difference.

 
///<reference path='_declare/jquery-1.8.d.ts'/>

class Main {

    private TIME_TEXT:string = "Timer is complete.";//Constant

    constructor()
    {
        $(".js-alert-link").on("click", this.startTimer.bind(this));
    }

    public startTimer(event):void
    {
        var referenceToATag = event.target;
        var $referenceToATag = $(event.target);

        var self = this;
        setTimeout(function() {
            self.timerComplete();
        }, 100);
    }

    private timerComplete():void
    {
        alert(this.TIME_TEXT);
    }

}

Taking a look at the below example and the previous one. We will convert some of the code to use TypeScript’s Arrow Functions. Take a look at (event) => this.startTimer(event) and compare it with the above. Also we converted the “setTimeout” call to use the Arrow Function. There are no arguments sent so this Arrow Funciton looks like () => { this.timerComplete(); }

 
///<reference path='_declare/jquery-1.8.d.ts'/>

class Main {

    private TIME_TEXT:string = "Timer is complete.";//Constant

    constructor()
    {
        $(".js-alert-link").on("click", (event) => this.startTimer(event));
    }

    public startTimer(event):void
    {
        var referenceToATag = event.target;
        var $referenceToATag = $(event.target);

        setTimeout(() => {
            this.timerComplete();
        }, 100);
    }

    private timerComplete():void
    {
        alert(this.TIME_TEXT);
    }

}

Taking the same code above we will add the appropriate typing for some of the parameters and variables. Check it out, we added a JQueryEventObject, HTMLAnchorElement and JQuery type.
We also need to do some type casting because the compiler doesn’t know that the event.target is an HTMLAnchorElement. To cast something we place the type inside a less than and greater than symbol and place it before the object like:

 
<HTMLAnchorElement> event.target

Why add all these types to objects and variables? It make your life easier when you have an IDE the supports code completion and refactoring. The next version of WebStorm and PhpStorm have support for TypeScript. So does Visual Studio but I am not a .Net guy just yet.

 
///<reference path='_declare/jquery-1.8.d.ts'/>

class Main {

    private TIME_TEXT:string = "Timer is complete.";//Constant

    constructor()
    {
        $(".js-alert-link").on("click", (event:JQueryEventObject) => this.startTimer(event));
    }

    public startTimer(event:JQueryEventObject):void
    {
        var referenceToATag:HTMLAnchorElement = <HTMLAnchorElement> event.target;
        var $referenceToATag:JQuery = $(event.target);

        setTimeout(() => {
            this.timerComplete();
        }, 100);
    }

    private timerComplete():void
    {
        alert(this.TIME_TEXT);
    }

}

Below you can download the TypeScript tutorial example files. Also if you like this tutorial please provide a link back to this page or my site.

class Main {

    constructor()
    {
        this.addPerson("Jon");
        this.addPerson("Brad", 6);
        this.addPerson("David", 4.11, 200);
        this.addPerson("Robert");
    }

    addPerson(name:string, height:number = 5.10, weight:number = 180):void
    {
      console.log(name + " is " + height + " tall and weighs " + weight + " pounds.")
    }

}

This will console log out:

Jon is 5.1 tall and weighs 180 pounds.
Brad is 6 tall and weighs 180 pounds.
David is 5.11 tall and weighs 200 pounds.
Robert is 5.1 tall and weighs 180 pounds. 

The generated code looks very clean and readable from the TypeScript compiler.

var Main = (function () {
    function Main() {
        this.addPerson("Jon");
        this.addPerson("Brad", 6);
        this.addPerson("David", 4.11, 200);
        this.addPerson("Robert");
    }
    Main.prototype.addPerson = function (name, height, weight) {
        if (typeof height === "undefined") { height = 5.1; }
        if (typeof weight === "undefined") { weight = 180; }
        console.log(name + " is " + height + " tall and weighs " + weight + " pounds.");
    };
    return Main;
})();

You can download the code below. Also if you like this tutorial please provide a link back to this page or my site.

More and more I play around with TypeScript I think it is the best way to do JavaScript development for large and small projects. One thing I’ve noticed is some people are not aware of how easy it is to compile all your referenced .ts files into one JavaScript .js file.

I am not sure if this is not straight forward when using Visual Studio but I am using WebStorm/PhpStorm for my development and using the Command/Terminal Window to manually make my TypeScript commands. To compile all the .tc files into one .js file I use this command:

tsc --out main.js Main.ts

Now I am assuming the Main.ts is your main TypeScript file that has references(///<reference path=’path/to/Class.ts’/>) to other .ts files.

Check out my OOP TypeScript Tutorial as an example how this works.

…rest parameters are an identifier that represents the name of the array of arguments passed in to the function. The parameter does not need to be called rest; it can have any name that is not a keyword. You can specify the data type of the … (rest) parameter as any[] (Array), but this could cause confusion because the parameter accepts a comma-delimited list of values, which is not identical to an instance of the array.

Below you can see we have two single parameters followed by a …(rest) parameter.

class RestExample
{
    constructor()
    {
        this.restExampleMethod("arg1", "arg2", "Start", "of", "rest", "arguments")
    }

    public restExampleMethod(param1:string, param2:string, ...rest):void
    {
        console.log("param1", param1);//Logs single string.
        console.log("param2", param2);//Logs single string.
        console.log("...rest", rest);//Logs array of strings.
    }

}

Below you can download the TypeScript example files. Also if you like this tutorial please provide a link back to this page or my site.

I am going to talk about JavaScript Namespacing with TypeScript’s Internal Modules and show an example how you can use namespacing with your TypeScript applications. If you are new to TypeScript check out my OOP TypeScript Tutorial.

First off JavaScript namespacing is a way of preventing issues or properties being overridden on the browser window object. It also keeps the browser window object cleaner because all our JavaScript object are not global. For example if I was to create a class called Main it would be window.Main and would be global. If someone else working on the same website as you creates a another Main JavaScript object then one of the Main object will be overriden with the other code.

What I have seen and have done myself is create a single property/variable and then add other objects to that property.

var somename = somename || {};
somename.Main = function(){};
somename.Car = function(){};

Now how do we do this in TypeScript? Lets take this TypeScript class below:

class Main
{
    constructor()
    {
        console.log("Main");
    }
}

If you compiled this code your window object property will look like:

window.Main

Now to add the Main class into a namespace we need to wrap the class with a module and give that module a name/namespace. The namespace can be anything you want and for example I am going to make the namespace MyNamespace. We also now need to put an export statement in front of our class declaration.

module MyNamespace
{
    export class Main
    {
        constructor()
        {
            console.log("Main");
        }
    }
}

Now your window object property will look like:

window.MyNamespace.Main

Import Other Namespace Classes

Lets take our Main class and now import some other classes that have a different namespace.

///<reference path='AnotherNamespace/ClassOne.ts'/>
///<reference path='AnotherNamespace/ClassTwo.ts'/>

module MyNamespace
{
    import ClassOne = AnotherNamespace.ClassOne;
    import ClassTwo = AnotherNamespace.ClassTwo;

    export class Main
    {
        private _classOne:ClassOne;
        private _classTwo:ClassTwo;

        constructor()
        {
            this._classOne = new ClassOne();
            this._classTwo = new ClassTwo();
        }
    }
}

You can see we reference two new classes with the reference path statement. Also when dealing with classes that have a different namespace you will need to use an import statement. The import statement(s) needs to be inside the module namespace area.

Here are the other classes for this example. Please not that they all have the same namespace but is different from the Main class. One thing to point out is if you are referencing classes with in the same namespace you do not need to use the import statement.:

///<reference path='CommonComponent.ts'/>

module AnotherNamespace
{
    export class ClassOne
    {
        private _component:CommonComponent;

        constructor()
        {
            this._component = new CommonComponent();
        }
    }
}

///<reference path='CommonComponent.ts'/>

module AnotherNamespace
{
    export class ClassTwo
    {
        private _component:CommonComponent;

        constructor()
        {
            this._component = new CommonComponent();
        }
    }
}

module AnotherNamespace
{
    export class CommonComponent
    {
        constructor()
        {
        }
    }
}

To compile all these classes into one file you can use the TypeScript compiler command below:

tsc -out _compiled/main.js Main.ts

Below is the HTML is for this TypeScript Namespace tutorial.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="scripts/_compiled/main.js"></script>
    <script type="text/javascript">
        window.onload = function(event) {
            //Get class from namespace.
            var Main = MyNamespace.Main;

            var app = new Main();

            console.log(app);
            console.log("MyNamespace objects found on the window object:", window.MyNamespace);
            console.log("AnotherNamespace objects found on the window object:", window.AnotherNamespace);
        }
    </script>
</head>
<body>
    <p>Open your console log and view the output.</p>
</body>
</html>

You can download the example files here: https://github.com/codeBelt/Example-TypeScript-Namespace

Another Namespace Example

You can take this a step future and maybe it’s over kill. I am going you use reverse domain name notation and the window object property look like:

window.com.codebelt.Main
//Other Objects/Classes in my code base:
window.com.codebelt.components.vehicles.Truck
window.com.codebelt.components.accessories.soundsystems.CDPlayer

You may wanna check out my first TypeScript Tutorial to see the difference when not using TypeScript module’s.

///<reference path='com/codebelt/components/vehicles/Car.ts'/>
///<reference path='com/codebelt/components/vehicles/Truck.ts'/>

module com.codebelt
{
    import Car = com.codebelt.components.vehicles.Car;
    import Truck = com.codebelt.components.vehicles.Truck;

    export class Main
    {
        private _compact:Car;
        private _pickup:Truck;

        constructor()
        {
            this._compact = new Car(21, 18);
            this._compact.changeGear();

            this._compact.useAccessory();

            this._pickup = new Truck(16, 23);
            this._pickup.changeGear();
            this._pickup.useAccessory();

            this._compact.soundSystem.turnOn();
            this._compact.soundSystem.playSelection(2);
            this._pickup.soundSystem.turnOn();

            this._compact.drive();
            this._pickup.drive();
        }
    }
}

You can get this extreme namespacing example files at: https://github.com/codeBelt/Example-TypeScript-Namespace-Overboard

Ambient Interface Declaration

I just created one for GreenSock’s TweenMax, TweenLite, etc. tweening JavaScript library. Check out the full TypeScript Ambient Declarations Class for GreenSock TweenMax/TweenLite and the rest of the JavaScript library.

I am going to take a few examples from the GreenSock JavaScript Docs http://api.greensock.com/js/

One thing is if you want to get things up and running fast all you needed to do is declare a variable for what JavaScript class you wan to use. For example I wanted to use TweenLite for my HTML5 Canvas Banner ad so I setup a file called greensock.d.ts and had the code below in it.

declare var TweenLite:any;

This will work but you will get not any intelli-sense or type checking.

Then I imported that file into the top of my main TypeScript file like:

///<reference path='greensock.d.ts'/>

Once I imported the declaration file I can called the TweenLite.to() method in my TypeScript file. Which animates an object called objectToAnimate for 1 sec to the x position of 156 and a y position of 200. Since we have a GreenSock declaration file we won’t get any compiling errors.

TweenLite.to(this.objectToAnimate, 1, {x:156, y:200});

I am lucky that GreenSock is well documented which made making a the declaration file easy. Below is the public methods for the TweenLite.

delayedCall(delay:Number, callback:Function, params:Array = null, scope:* = null, useFrames:Boolean = false):TweenLite
from(target:Object, duration:Number, vars:Object):TweenLite
fromTo(target:Object, duration:Number, fromVars:Object, toVars:Object):TweenLite
getTweensOf(target:*):Array
invalidate():*
killDelayedCallsTo(func:Function):void
killTweensOf(target:*, vars:Object = null):void
set(target:Object, vars:Object):TweenLite
to(target:Object, duration:Number, vars:Object):TweenLite

Below is the converted public methods into TypeScript.

interface TweenLite {
    delayedCall(delay:number, callback:Function, params?:any[], scope?:any, useFrames?:bool):TweenLite;
    from(target:Object, duration:number, vars:Object):TweenLite;
    fromTo(target:Object, duration:number, fromVars:Object, toVars:Object):TweenLite;
    getTweensOf(target:Object):any[];
    invalidate():any;
    killDelayedCallsTo(func:Function):void;
    killTweensOf(target:Object, vars?:Object):void;
    set(target:Object, vars:Object):TweenLite;
    to(target:Object, duration:number, vars:Object):TweenLite;
}

Ambient Class Declaration (Value of type is not newable)

Now to work with raw JavaScript classes(not TypeScript classes) within TypeScript we need to create an Ambient Class Declaration so we can write var something = new SomethingClass();. I ran into this issue when playing with RouterJS and the TypeScript compiler said “Value of type ‘Router’ is not newable”. This is because I was trying to create a Ambient Interface Declaration for RouterJS. Below is how I solved that problem. Also notice the constructor and how we set it to have an optional parameter.

class Router {
    // properties
    trigger:bool;
    
    // methods
    route(route:string, callback:Function):any[];
    checkRoutes(state:Object):bool;
    navigate(url:string, trigger?:bool, replace?:bool, name?:string):any;
    go(num:number):any;
    back(num:number):any;

    //constructor
    constructor (router?:Object);
}

We can take it a step further to deal with JavaScript libraries that have namespacing. If you look below we create a module for the namespace(createjs) and then we export the class(DisplayObject). I got this example from DefinitelyTyped.

module createjs {
    export class DisplayObject {
        // properties
        static suppressCrossDomainErrors: bool;
        visible: bool;
        x: number;
        y: number;

        constructor ();

        // methods
        cache(x: number, y: number, width: number, height: number, scale?: number): void;
        clone(): DisplayObject;
        draw(ctx: CanvasRenderingContext2D, ignoreCache?: bool): void;

        // events
        onClick: (event: MouseEvent) => any;
        onDoubleClick: (event: MouseEvent) => any;
        onMouseOut: (event: MouseEvent) => any;
        onMouseOver: (event: MouseEvent) => any;
        onPress: (event: MouseEvent) => any;
        onTick: () => any;
    }
}

When you type your arguments, use the following types:
String’s will be typed as :string
Number’s will be typed as :number
Boolean’s will be typed as :bool
Object’s will still be :Object
Array’s will be typed as :any[]
Untyped or * will be typed as :any
Function’s will be typed as :Function

Things to note when making a declaration file is always end the lines with a semi-colon ;. Any argument value that can me be null or has a default value put a ? after the argument name and if there are any other arguments after that one do the same. This tells the compiler that these arguments are optional. Example:

method(one:number, two?:any[], three?:any, four?:bool):void;

Also if you like this tutorial please provide a link back to this page or my site.