The document discusses TypeScript modules. It begins by showing how to organize validators into a single file module. It then demonstrates splitting the module across multiple files by creating LettersOnlyValidator.ts and ZipCodeValidator.ts files that both reference a Validation.ts file and export classes that implement the module's interface. This allows validators to be modularized while splitting code across separate files.

1. TypeScript(1)

2. Basic Types
Boolean
Number
String
Array
Enum
Any
Void

3. Basic Types(1)
TypeScript
JavaScript
Boolean var isDone: boolean = false; var isDone = false;
Number var height: number = 6; var height = 6;
String var name: string = "bob"; var name = "bob";
name = 'smith'; name = 'smith';
Array type of the elements followed by '[]'
var list:number[] = [1, 2, 3]; var list = [1, 2, 3];
Array<elemType>
var list:Array<number> = [1, 2, 3]; *JS With
Type Annotation

4. Basic Types(2)
Enum 1 enum Color {Red, Green, Blue};
var c: Color = Color.Green;
Enum 2 enum Color {Red = 1, Green, Blue};
var c: Color = Color.Green;
Enum 3 enum Color {Red = 1, Green = 2, Blue = 4};
var c: Color = Color.Green;
from a numeric value to the name of that value
enum Color {Red = 1, Green, Blue};
var colorName: string = Color[2];

5. Basic Types(3)
Enum var Color;
enum Color {Red, Green, Blue}; (function (Color) {
Color[Color[“Red”] = 0] = “Red”;
Color[Color[“Green”] = 1] =
“Green”;
Color[Color[“Blue”] = 2] = “Blue”;
})(Color || (Color = {}));1. Color[Color[“Red”] = 0] =
“Red”;
Color[“Red”] = 0;
Color[0] = “Red”;
2. immediately executing function
(function (Color) {...})();
var a = function(Color){...};
a(Color || (Color = {}));3. var Color = {};
(function (Color)
{...})(Color);

6. Basic Types(4)
Any Allow you to gradually opt-in and opt-out of type-checking during compilation.
var notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
var list:any[] = [1, true, "free"];
list[1] = 100;
Void function warnUser(): void {
alert("This is my warning message");
}

7. Interfaces(1)
One of TypeScript's core principles is that type-checking focuses on the 'shape' that values have. This is
sometimes called "duck typing" or "structural subtyping".
Start With...
using an interface
function printLabel(labelledObj: {label: string}) {
console.log(labelledObj.label);
}
var myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);
interface LabelledValue {
label: string;
}
function printLabel(labelledObj: LabelledValue) {
console.log(labelledObj.label);
}
(JS) function printLabel(labelledObj) {
console.log(labelledObj.label);
}

8. Interfaces(2)
Optional Properties
function createSquare(config: SquareConfig): {color: string; area: number} {
var newSquare = {color: "white", area: 100};
if (config.color) {
newSquare.color = config.color;
}
if (config.width) {
newSquare.area = config.width * config.width;
}
return newSquare;
}
var mySquare = createSquare({color: "black"});
interface SquareConfig
{
color?: string;
width?: number;
}

9. Interfaces(3)
Optional Properties(JS)
function createSquare(config: SquareConfig): {color: string; area: number} {
var newSquare = {color: "white", area: 100};
if (config.color) {
newSquare.color = config.color;
}
if (config.width) {
newSquare.area = config.width * config.width;
}
return newSquare;
}
var mySquare = createSquare({color: "black"});
interface SquareConfig
{
color?: string;
width?: number;
}

10. Interfaces(3)
Function Types
var mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
var result = source.search(subString);
if (result == -1) {
return false;
}
else {
return true;
}
}
//mySearch = function(src: string, sub: string) {
// var result = src.search(sub);
interface SearchFunc {
(source: string, subString: string): boolean;
}

11. Interfaces(4)
Array Types
Dictionary
interface StringArray {
[index: number]: string;
}
var myArray: StringArray;
myArray = ["Bob", "Fred"];
interface Dictionary {
[index: string]: string;
length: number;
// error, the type of 'length' is not a subtype of the indexer
owner: string;
}
var dic: Dictionary;
dic.length: return a number
=> dic[“length”]

12. Interfaces(5)
Class Types - Implementing an interface
interface ClockInterface {
currentTime: Date;
}
class Clock implements ClockInterface {
currentTime: Date;
constructor(h: number, m: number) { }
}
var Clock = (function() {
function Clock(h, m)
{
}
return Clock;
})();
var a = function Clock(h, m) {
};
var b = function() {
return a;
};
var Clock = b();

13. Interfaces(6)
Class Types - Implementing an interface
interface ClockInterface {
currentTime: Date;
setTime(d: Date);
}
class Clock implements ClockInterface {
currentTime: Date;
setTime(d: Date) {
this.currentTime = d;
}
constructor(h: number, m: number) { }
}
var Clock = (function() {
function Clock(h, m) {
}
Clock.prototype.setTime = function(d) {
this.currentTime = d;
};
return Clock;
})();

14. Interfaces(7)
Class Types - Difference between static/instance side of class
You may notice that if you create an interface with a construct signature and try to create a class that implements this
interface you get an error:
This is because when a class implements an interface, only the instance side of the class is checked.
Since the constructor sits in the static side, it is not included in this check.
Instead, you would need to work with the 'static' side of the class directly.
interface ClockInterface {
new (hour: number, minute: number);
}
//Class ‘Clock’ incorrectly implements
interface ‘ClockInterface’
class Clock implements ClockInterface {
currentTime: Date;
constructor(h: number, m: number) { }
}
interface ClockStatic {
new (hour: number, minute: number);
}
class Clock {
currentTime: Date;
constructor(h: number, m: number) { }
}
var cs: ClockStatic = Clock;
var newClock = new cs(7, 30);

15. Interfaces(8)
Extending Interfaces
interface Shape {
color: string;
}
interface Square extends Shape {
sideLength: number;
}
var square = <Square>{};
square.color = "blue";
square.sideLength = 10;
interface Shape {
color: string;
}
interface PenStroke {
penWidth: number;
}
interface Square extends Shape, PenStroke {
sideLength: number;
}
var square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;var square = {};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

16. Interfaces(8)
Class Types - Hybrid Types
interface Counter {
(start: number): string;
interval: number;
reset(): void;
}
var c: Counter; //undefined
c(10);
c.reset();
c.interval = 5.0;

17. Classes(1)
Classes
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
var greeter = new Greeter("world");
var Greeter = (function() {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function()
{
return "Hello, " + this.greeting;
}
}
var greeter = new Greeter("world");

18. Classes(2)
Inheritance
var sam = new Snake("Sammy");
var tom: Animal = new Horse("Tommy");
sam.move();
tom.move(34);
class Animal {
name:string;
constructor(theName: string) { this.name = theName;
}
move(meters: number = 0) {
alert(this.name + " moved " + meters + "m.");
}
}
class Snake extends Animal {
constructor(name: string) { super(name); }
move(meters = 5) {
alert("Slithering...");
super.move(meters);
}
}
class Horse extends Animal {
constructor(name: string) { super(name); }
move(meters = 45) {
alert("Galloping...");
super.move(meters);
}
}

19. Classes(3)
Inheritance(JS) var Animal = (function() {
function Animal(theName) { this.name = theName; }
Amimal.prototype.move = function(meters) {
if (meters === void 0) { meters = 0; }
alert(this.name + " moved " + meters + "m.");
};
return Animal;
})();
var Snake = (function(_supper) {
__extends(Snake, _super);
function Snake(name) {
_super.call(this, name);
}
Amimal.prototype.move = function(meters) {
if (meters === void 0) { meters = 5; }
alert("Slithering...”);
_super.prototype.move.call(this, meters);
};
return Snake;
})(Animal);

20. Classes(4)
Private/Public modifiers - Public by default
class Animal {
private name:string;
constructor(theName: string) { this.name = theName; }
move(meters: number) {
alert(this.name + " moved " + meters + "m.");
}
}

21. Classes(5)
Private/Public modifiers - Understanding private
For two types to be considered compatible, if one of them has a private member, then the other must have a private
member that originated in the same declaration.
class Animal {
private name:string;
constructor(theName: string) {
this.name = theName;
}
}
class Rhino extends Animal {
constructor() { super("Rhino"); }
}
class Employee {
private name:string;
constructor(theName: string) {
this.name = theName;
}
}
var animal = new Animal("Goat");
var rhino = new Rhino();
var employee = new Employee("Bob");
animal = rhino;
animal = employee;
//error: Animal and Employee are
not compatible

22. Classes(6)
Private/Public modifiers - Parameter properties
Using 'private' in this way creates and initializes a private member, and similarly for 'public'.
class Animal {
constructor(private name: string) { }
move(meters: number) {
alert(this.name + " moved " + meters + "m.");
}
}

23. Classes(7)
Without Accessors(get/set)
class Employee {
fullName: string;
}
var employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
alert(employee.fullName);
}
var Employee = (function () {
function Employee() {
}
return Employee;
})();
var employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
alert(employee.fullName);
}

24. Classes(8)
With Accessors(get/set)
var passcode = "passcode";
class Employee {
private _fullName: string;
get fullName(): string {
return this._fullName;
}
set fullName(newName: string) {
if (passcode && passcode == "passcode") {
this._fullName = newName;
}
else {
alert("Error!");
}
}
}
var employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
alert(employee.fullName);
}
var passcode = "passcode";
var Employee = (function () {
function Employee() {
}
Object.defineProperty(Employee.prototype, "fullName", {
get: function () {
return this._fullName;
},
set: function (newName) {
if (passcode && passcode == "passcode") {
this._fullName = newName;
}
else {
alert("Error!");
}
},
enumerable: true,
configurable: true
});
return Employee;
})();

25. Classes(9)
Static Properties
class Grid {
static origin = {x: 0, y: 0};
calculateDistanceFromOrigin(point: {x: number; y: number;}) {
var xDist = (point.x - Grid.origin.x);
var yDist = (point.y - Grid.origin.y);
return Math.sqrt(xDist * xDist + yDist * yDist) /
this.scale;
}
constructor (public scale: number) { }
}
var Grid = (function () {
function Grid(scale) {
this.scale = scale;
}
Grid.prototype.calculateDistanceFromOrigin = function (point) {
var xDist = (point.x - Grid.origin.x);
var yDist = (point.y - Grid.origin.y);
return Math.sqrt(xDist * xDist + yDist * yDist) /
this.scale;
};
Grid.origin = { x: 0, y: 0 };
return Grid;
})();

26. Classes(10)
Advanced Techniques - Constructor functions
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}
var greeter: Greeter;
greeter = new Greeter("world");
alert(greeter.greet());
var Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function () {
return "Hello, " + this.greeting;
};
return Greeter;
})();
var greeter;
greeter = new Greeter("world");
alert(greeter.greet());

27. Classes(11)
Advanced Techniques - Constructor functions
class Greeter {
static standardGreeting = "Hello,
there";
greeting: string;
greet() {
if (this.greeting) {
return "Hello, " +
this.greeting;
}
else {
return Greeter.standardGreeting;
}
}
}
var greeter2:Greeter = new
greeterMaker();
alert(greeter2.greet());
var greeterMaker: typeof Greeter = Greeter;
greeterMaker.standardGreeting = "Hey there!";
var greeter1: Greeter;
greeter1 = new Greeter();
alert(greeter1.greet());

28. Classes(12)
Advanced Techniques - Using a class as an interface
class Point {
x: number;
y: number;
}
interface Point3d extends Point {
z: number;
}
var point3d: Point3d = {x: 1, y: 2, z: 3};

29. End

30. TypeScript(2)

31. Modules
internal module
external module
when each is appropriate and how to use
advanced topics of how to use external modules
address some common pitfalls

32. Modules(1) - First steps
Validators in a single file
var lettersRegexp = /^[A-Za-z]+$/;
var numberRegexp = /^[0-9]+$/;
class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}
class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
interface StringValidator {
isAcceptable(s: string): boolean;
}

33. Modules(2) - First steps
// Some samples to try
var strings = ['Hello', '98052', '101'];
// Validators to use
var validators: { [s: string]: StringValidator; } = {};
validators['ZIP code'] = new ZipCodeValidator();
validators['Letters only'] = new LettersOnlyValidator();
// Show whether each string passed each validator
strings.forEach(s => {
for (var name in validators) {
console.log('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does
not match ') + name);
}
});
interface Validator{
[s: string]: StringValidator;
}
var validators: Validator = {};
interface Validator{
sv: StringValidator;
}
var validators: Validator = {};
"Hello" does not match ZIP code
"Hello" matches Letters only
"98052" matches ZIP code
"98052" does not match Letters
only
"101" does not match ZIP code

34. Modules(3) - Adding Modularity
Modularized Validators
module Validation {
export interface StringValidator {
isAcceptable(s: string): boolean;
}
var lettersRegexp = /^[A-Za-z]+$/;
var numberRegexp = /^[0-9]+$/;
export class LettersOnlyValidator implements StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}
export class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}

35. Modules(4) - Adding Modularity
// Some samples to try
var strings = ['Hello', '98052', '101'];
// Validators to use
var validators: { [s: string]: Validation.StringValidator; } = {};
validators['ZIP code'] = new Validation.ZipCodeValidator();
validators['Letters only'] = new Validation.LettersOnlyValidator();
// Show whether each string passed each validator
strings.forEach(s => {
for (var name in validators) {
console.log('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does
not match ') + name);
}
});

36. Modules(5) - Splitting Across Files - Multi-file internal modules
LettersOnlyValidator.ts
/// <reference path="Validation.ts" />
module Validation {
var lettersRegexp = /^[A-Za-z]+$/;
export class LettersOnlyValidator implements
StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}
}
ZipCodeValidator.ts
/// <reference path="Validation.ts" />
module Validation {
var numberRegexp = /^[0-9]+$/;
export class ZipCodeValidator implements StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
}
Validation.ts
module Validation {
export interface StringValidator {
isAcceptable(s: string): boolean;
}
}

37. Modules(7) - Splitting Across Files - Multi-file internal modules
Test.ts
/// <reference path="Validation.ts" />
/// <reference path="LettersOnlyValidator.ts" />
/// <reference path="ZipCodeValidator.ts" />
// Some samples to try
var strings = ['Hello', '98052', '101'];
// Validators to use
var validators: { [s: string]: Validation.StringValidator; } = {};
validators['ZIP code'] = new Validation.ZipCodeValidator();
validators['Letters only'] = new Validation.LettersOnlyValidator();
// Show whether each string passed each validator
strings.forEach(s => {
for (var name in validators) {
console.log('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does
not match ') + name);
}
});

38. Modules(8) - Splitting Across Files - Multi-file internal modules
concatenated output
tsc --out sample.js Test.ts
tsc --out sample.js Validation.ts LettersOnlyValidator.ts ZipCodeValidator.ts Test.ts
per-file compilation (the default)
MyTestPage.html (excerpt)
<script src="Validation.js" type="text/javascript" />
<script src="LettersOnlyValidator.js" type="text/javascript" />
<script src="ZipCodeValidator.js" type="text/javascript" />
<script src="Test.js" type="text/javascript" />

39. Modules(9) - Going External
nodejs requirejs
import someMod = require('someModule');
tsc --module commonjs Test.ts
For node.js, use --module commonjs
For require.js, use --module amd.

40. Modules(10) - Going External
LettersOnlyValidator.ts
import validation = require('./Validation');
var lettersRegexp = /^[A-Za-z]+$/;
export class LettersOnlyValidator implements validation.StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}
ZipCodeValidator.ts
import validation = require('./Validation');
var numberRegexp = /^[0-9]+$/;
export class ZipCodeValidator implements validation.StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
Validation.ts
export interface StringValidator {
isAcceptable(s: string): boolean;
}

41. Modules(11) - Going External
Test.ts
import validation = require('./Validation');
import zip = require('./ZipCodeValidator');
import letters = require('./LettersOnlyValidator');
// Some samples to try
var strings = ['Hello', '98052', '101'];
// Validators to use
var validators: { [s: string]: validation.StringValidator; } = {};
validators['ZIP code'] = new zip.ZipCodeValidator();
validators['Letters only'] = new letters.LettersOnlyValidator();
// Show whether each string passed each validator
strings.forEach(s => {
for (var name in validators) {
console.log('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does
not match ') + name);
}
});

42. Modules(12) - Going External - Code Generation for External Modules
SimpleModule.ts
import m = require('mod');
export var t = m.something + 1;
AMD / RequireJS SimpleModule.js:
define(["require", "exports", 'mod'], function(require, exports, m) {
exports.t = m.something + 1;
});
CommonJS / Node SimpleModule.js:
var m = require('mod');
exports.t = m.something + 1;

43. Modules(13) - Export =
LettersOnlyValidator.ts
import validation = require('./Validation');
var lettersRegexp = /^[A-Za-z]+$/;
class LettersOnlyValidator implements validation.StringValidator {
isAcceptable(s: string) {
return lettersRegexp.test(s);
}
}
export = LettersOnlyValidator;
ZipCodeValidator.ts
import validation = require('./Validation');
var numberRegexp = /^[0-9]+$/;
class ZipCodeValidator implements validation.StringValidator {
isAcceptable(s: string) {
return s.length === 5 && numberRegexp.test(s);
}
}
export = ZipCodeValidator;
Validation.ts
export interface StringValidator {
isAcceptable(s: string): boolean;
}

44. Modules(14) - Export =
Test.ts
import validation = require('./Validation');
import zipValidator = require('./ZipCodeValidator');
import lettersValidator = require('./LettersOnlyValidator');
// Some samples to try
var strings = ['Hello', '98052', '101'];
// Validators to use
var validators: { [s: string]: validation.StringValidator; } = {};
validators['ZIP code'] = new zipValidator();
validators['Letters only'] = new lettersValidator();
// Show whether each string passed each validator
strings.forEach(s => {
for (var name in validators) {
console.log('"' + s + '" ' + (validators[name].isAcceptable(s) ? ' matches ' : ' does
not match ') + name);
}
});

45. Modules(15) - Alias
Basic Aliasing
module Shapes {
export module Polygons {
export class Triangle { }
export class Square { }
}
}
import polygons = Shapes.Polygons;
var sq = new polygons.Square(); // Same as 'new Shapes.Polygons.Square()'

46. Modules(16) - Optional Module Loading and Other Advanced Loading
Scenarios
Dynamic Module Loading in node.js
declare var require;
import Zip = require('./ZipCodeValidator');
if (needZipValidation) {
var x: typeof Zip = require('./ZipCodeValidator');
if (x.isAcceptable('.....')) { /* ... */ }
}
Sample: Dynamic Module Loading in require.js
declare var require;
import Zip = require('./ZipCodeValidator');
if (needZipValidation) {
require(['./ZipCodeValidator'], (x: typeof Zip) => {
if (x.isAcceptable('...')) { /* ... */ }
});
}

47. Modules(17) - Working with Other JavaScript Libraries - Ambient Internal
Modules
D3.d.ts (simplified excerpt)
declare module D3 {
export interface Selectors {
select: {
(selector: string): Selection;
(element: EventTarget): Selection;
};
}
export interface Event {
x: number;
y: number;
}
export interface Base extends Selectors {
event: Event;
}
}
declare var d3: D3.Base;

48. Modules(18) - Working with Other JavaScript Libraries - Ambient External
Modules
node.d.ts (simplified excerpt)
declare module "url" {
export interface Url {
protocol?: string;
hostname?: string;
pathname?: string;
}
export function parse(urlStr: string, parseQueryString?, slashesDenoteHost?): Url;
}
declare module "path" {
export function normalize(p: string): string;
export function join(...paths: any[]): string;
export var sep: string;
} ///<reference path="node.d.ts"/>
import url = require("url");
var myUrl = url.parse("http://www.typescriptlang.org");

49. Modules(19) - Pitfalls of Modules - /// <reference> to an external module
myModules.d.ts
// In a .d.ts file or .ts file that is not an external module:
declare module "SomeModule" {
export function fn(): string;
}
myOtherModule.ts
/// <reference path="myModules.d.ts" />
import m = require("SomeModule");

50. Modules(20) - Pitfalls of Modules - Needless Namespacing
shapes.ts
export module Shapes {
export class Triangle { /* ... */ }
export class Square { /* ... */ }
}
shapeConsumer.ts
import shapes = require('./shapes');
var t = new shapes.Shapes.Triangle(); // shapes.Shapes?
Revised Example:
shapes.ts
export class Triangle { /* ... */ }
export class Square { /* ... */ }
shapeConsumer.ts
import shapes = require('./shapes');
var t = new shapes.Triangle();