TypeScript Modules

Dan Wahlin
Twitter: @danwahlin

John Papa
Twitter: @john_papa
Whats a Module?
 Organization

Separated
Testable

JavaScript Modules
Maintainable

Reusable
 You May Be a Module if

Explicitly declare a module

module dataservice {
// code
}; dataservice Module

No module declaration, no exports, no imports

Global Module
class TestClass implements ITest {
Global Namespace
private a = 2;
public b = 4;
window
};
var t = new TestClass();
 Module Flexibility

Extend modules Extend modules

o Custom modules or the global module within or across files

Separation of concerns
o Each module has a specific role Ravioli

Open
o Import other modules
Choose what to
o Export features expose
Internal Modules
 Internal Named Module
Named Module

namespace Shapes {
interface IRectangle {
height: number;
width: number;
}

class Rectangle implements IRectangle {
constructor (public height: number, public width: number) {
}
}

var rect: IRectangle = new Rectangle(10, 4);
}

var myRectangle = Shapes._________

Inaccessible,
nothing was exported
 Exporting Internal Modules

namespace Shapes {

export class Rectangle {

constructor (public height: number, public width: number) {

}
}
}

var myRectangle = new Shapes.Rectangle(2,4);

Accessible,
Because it was exported
 Extending Internal Modules

namespace Shapes {
export class Rectangle {
constructor (public height: number, public width: number) {
Export }
}
}

var rect = new Shapes.Rectangle(2,4); Extending the
Shapes module
namspace Shapes {
export class Circle {
constructor (public radius: number) {
}
}
}

var circle = new Shapes.Circle(20);

 Immediately-Invoked Function Expression
( Pronounced iy )
(function () {
console.log("hi there");
})()
IIFE

outer ( ) disambiguates function expression from statement

can lock in values and save state

minimize global scope pollution and create privacy

 Emitting IIFE
TypeScript JavaScript
namespace Shapes { var Shapes;
export class Rectangle { (function (Shapes) {
constructor ( var Rectangle = (function () {
public height: number, function Rectangle(height, width) {
public width: number) { this.height = height;
} this.width = width;
} }
} return Rectangle;
Rectangle IIFE })();
Shapes.Rectangle = Rectangle;
})(Shapes || (Shapes = {}));

Shapes
var rect = var rect = IIFE
new Shapes.Rectangle(2,4); new Shapes.Rectangle(2, 4);
Referencing Internal Modules
 Separating Internal Modules
Separation is ideal
Modules separated across files for larger projects

Must load them in the proper sequence Can get dicult to

maintain in larger
o Script tags
projects

Reference them
o /// <reference path="shapes.ts" />
 Separation
shapes.ts
namespace Shapes {
export class Rectangle {
export constructor (
public height: number, public width: number) {
}
}
}

reference
shapemaker.ts
/// <reference path="shapes.ts" />

namespace ShapeMaker {
var rect = new Shapes.Rectangle(2,4);
}
Importing External Modules and Managing
Large Applications
 Internal and External Modules
When you see
Import , think
Internal External external module

Namespace-like modules Separately loadable modules

For grouping code Exported entities can be

imported into other modules
No need to import them import viewmodels = require('./viewmodels');

CommonJS or AMD
Conventions
o http://requirejs.org/
 Why?

Sequencing script
dependencies is hard
Many Modules How do we
Manage
Dependencies
and Order?
 AMD

Asynchronous Module Definition

o Manage Dependencies
o Loads them asynchronously

Loads modules in sequence Learn More about

o Based on defined dependencies Require.js in my course
o Who requires who ? Single Page Apps
SPA Basics:
require.js Separating the
Ravioli
 Loading Module Dependencies with Require.js
require(['bootstrapper'], main.ts
(bootstrapper) => {
bootstrapper.run();
});

import gt = require('./greeter'); bootstrapper.ts

export function run() {
var el = document.getElementById('content');
var greeter = new gt.Greeter(el);
greeter.start();
}

export class Greeter { greeter.ts
start() {
this.timerToken = setInterval(() =>

this.span.innerText = new Date().toUTCString(), 500); }
}

Recap
 TypeScript Modules

Modules
o Why? More maintainable and re-usable for large projects
o Extendable
o Control accessibility
o Organize your code across multiple files
o More maintainable for large projects

Internal Modules
o Development time references for the tools and type checking
o Must sequence <script> tags properly

External Modules
o Modules that use the CommonJS or AMD conventions
o Dependency resolution using require.js ( http://requirejs.org )