TypeScript overview

TypeScript (TS) a scripting language that trans-piles (translated compilation) into JavaScript (JS) . Below are some of the advantages of TS over native JS including (Source):

  1. Supports concepts of OOP (object-oriented programming)
  2. Improves maintainability
  3. Supports intelisense and compile-time type validation
  4. Supports Type Definition files when referenced in .ts files
TypeScriptJavaScript
ClassesXX
InheritanceXX (Prototypal)
GenericsXX (no type system)
EnumsX

Typescript Types

TS supports many modern constructs including modules (namespace), interfaces, classes, enums and generics (Source). Below are some examples of instance, enum and classes:

//TypeScript: Module with Enum, Class and Interface
module Entity {
    export enum CarType {
        Hybrid, Gas, Electric
    }
    export class Car implements IVehicle {
        type: CarType;
        model: string;
        year: number;
    }
    export interface IVehicle {
        year: number;
    }
}

TypeScript Modules

Typescript modules provide code separation in the same way as a namespace in C#. To access code within module dependencies (.js) have to be imported in the right order.

TS modules use an established JavaScript Design pattern known as Immediately Invoked Function Expression ( IIFE ). IIFE are self-invoking, meaning that they do not need to be globally referenced in order to invoke code within the IIFE. Below is an example of IIFE being defined using the above TS “Entity ” module. (Source)

var Entity;
(function (Entity) {
 var CarType;
 (function (CarType) {
	 CarType[CarType["Hybrid"] = 0] = "Hybrid";
	 CarType[CarType["Gas"] = 1] = "Gas";
	 CarType[CarType["Electric"] = 2] = "Electric";
 })(CarType = Entity.CarType || (Entity.CarType = {}));
 var Car = (function () {
	 function Car() {
	 }
	 return Car;
 }());
 Entity.Car = Car;
})(Entity || (Entity = {}));

Nesting TypeScript Modules

Modules can be nested in TS, when doing so you can create code separation in a similar way as namespaces in C#. Using nested modules affects how you reference the module’s classes. Below is an example of nesting TS modules:

TS defining nested modules and a class type:

module moduleExample {
    export module moduleA {
        export class classA1 {
            constructor() { }
        }
    }
}
// Full qualified namespace
new moduleExample.moduleA.classA1();

// Importing modules
import reff = moduleExample.moduleA;
new reff.classA1();

Compiled JS output of the above TS:

var moduleExample;
(function (moduleExample) {
    var moduleA;
    (function (moduleA) {
        var classA1 = (function () {
            function classA1() {
            }
            return classA1;
        }());
        moduleA.classA1 = classA1;
    })(moduleA = moduleExample.moduleA || (moduleExample.moduleA = {}));
})(moduleExample || (moduleExample = {}));
new moduleExample.moduleA.classA1();
var reff = moduleExample.moduleA;
new reff.classA1();

Module Scope

The below example best illustrates TS module scopes. To reference a particular class instance the correct module must be referenced.

module moduleExample {
    module moduleB {
        export class classB1 {
            constructor() { }
        }
    }
}
// Following shows compile error:
// new moduleExample.moduleA.classB1(); // classB1 is in wrong module
// new moduleExample.moduleB.classB1(); // moduleB is not exported
// Corresponding JavaScript
var moduleExample;
(function (moduleExample) {
    var moduleB;
    (function (moduleB) {
        var classB1 = (function () {
            function classB1() {
            }
            return classB1;
        }());
        moduleB.classB1 = classB1;
    })(moduleB || (moduleB = {}));
})(moduleExample || (moduleExample = {}));