Notes from the Pluralsight course 'TypeScript Fundamentals'.

typescriptFundamentals.ts

/* 
Module 1 - Getting Started with Typescript
******************************************

Runs in any browser, on any host, on any OS, is open source, with good tool support.

Supports; 
	any JS code, 
	static typing, 
	encapsulation through classes and modules, 
	constructors, properties and functions, 
	interfaces
	arrow functions (ES6 feature), like lambdas
	intellisense and syntax checking
	
Use TS compiler 'tsc' to compile TS to JS.

TypeScript Syntax, Keywords and Code Hierarchy;
	TS is a superset of JS.
	Keywords: class, constructor, exports, extends, implements, imports, interface, modulw, publis, private, ..., =>, <T>, :
		 
Web Essentials can be used to show TS and JS side by side.

Sublime: it's possible to add custom build type so that pressing CTRL + B will call tasc to convert .rs to .js.	

Module 2 - Typing, Variables and Functions
******************************************

Grammar, Declarations and Annotations;
*/
var n1: number = 100;

class Operations {
	add: (x: number, y: number) => void =
	function(val1, val2) {
		console.log(val1 + val2);
	}

	multiply(val1: number, val2: number) {
		console.log(val1 * val2);
	}
}		 

// To include jQuery in TS;

/// <reference path="jquery.d.ts" />

declare var $;
var data = "Hello";
$("div").text(data);

// object types: functions, class, module, interface and literal types.

// Functions

var myFunc = function(h: number, w: number) {
	return h * w;
};

var myFunc2 = (h: number, w: number) => h * w; // 'return' not needed.

var myFunc3 = function(h: number, w: number): number { // set return type
	return h * w;
};

var greet: (msq: string) => void = function(name) {
	alert('Hello ' + name);
}

var squareIt: (rect: { x: number, y: number }) => number =
	function(r) { return r.x * r.y; }

var squareIt2: (rect: { x: number, y: number }) => number =
	r => r.x * r.y;

// Functions and interfaces
// Note that interfaces can also be used as the *return* types of functions.
interface SquareFunction {
	(x: number): number;
}

var squareItBasic: SquareFunction =
	function(num) { return num * num };
	
// Rewritting code above to use an interfce
interface Rectangle {
	x: number;
	y: number;
}

var squareIt3: (rect: Rectangle) => number =
	function(r) { return r.x * r.y; }



interface Person {
	name: string;
	greet: (msg: string) => void;
}

var p: Person = {
	name: 'Stuart',
	greet: function(msg: string) {
		console.log(msg + ', ' + this.name);
	}
}

p.name = 'Bob';
p.greet('hello there');


// Module 3 - Classes and Interfaces
// *********************************

class Car {
	engine: string;

	constructor(engine: string) {
		this.engine = engine;
	}
}

// or for shorthand field declaration
class Car1 {
	constructor(public engine: string) { }
}

// defining properties
class Car2 {
	private _engine: string;

	constructor(engine: string) {
		this.engine = engine;
	}

	get engine(): string {
		return this.engine;
	}

	set engine(value: string) {
		if (typeof value === 'undefined') { throw 'Supply an Engine!'; }
		this._engine = value;
	}

	start(): void {
		console.log('starting the engine');
	}
}

// casting
var table: HTMLTableElement = <HTMLTableElement>document.createElement('table');

// extending classes

abstract class Vehicle {
	wheelCount: number;
	
	constructor(wheels: number) {
		this.wheelCount = wheels;
	}
}

class Car3 extends Vehicle {
	engine: string;
	
	constructor(engine: string) {
		super(4);
		this.engine = engine;
	}
}

// 'rest' parameter to pass variable number of arguments.
function f(...values: number[]) {
	values.forEach(n => console.log(n));
}

f(1, 2, 3, 4);

// Using interfaces.

interface IAnimal {
	numberOfLegs: number;
}

class Dog implements IAnimal {
	numberOfLegs: number;
}

class Person1 {
	pet: IAnimal;
}

// extending an interface

interface IDog extends IAnimal {
	breed: string;
	isSlobbery: boolean;
}
  
function shootDog(dog: IDog) {
	if(dog.isSlobbery) {
		// shoot dog.
	}
}

shootDog({numberOfLegs: 4, breed: 'Alsatian', isSlobbery: false });

// Module 4 - TypeScript Modules
// *****************************
/*
Separate into modules for testability, maintainability, reusability.
Code not in a module is in the global namespace.
Can be extended across files or multiple modules in one file.
Can export features from a module and import other modules.
*/

module Shapes {
	export class Point {
		constructor(public x: number, public y: number){
			
		}
	}
}

module myProgram {
	var square = new Shapes.Point(5, 10);
}

// importing modules, allows for name shortening.

module App.Tools.Utils {
	export class Logger {
		write(msg: string) {
			console.log(msg);
		}
	}
}

import Utils = App.Tools.Utils;

var log = new Utils.Logger();

// when using module code in another file;
	// from the source file export the entity to be used
	// then reference the cource file in the file using the export, e.g. 
/// <reference path='filename.ts' />
// N.B. the order the .js scripts are included is significant though. Getting the
// scripts in the correct order is not too tricky when there are only 10 or 20
// but beyond that it's hard, CommonJS or AMD can help solve this.
// All the above stuff about modules is about understanding *internal* modules.

// Importing external modules and managing large applications;
// External modules can be loaded independently and only as needed. Exported
// entities can be imported into other modules;

import vm = module('viewmodels');

// TS uses CommonJS or AMD conventions, can use RequireJS (http://requirejs.ord)
// to implement this.
// External modules are used to make it easier to sequence scripts.

// Asynchronous Module Definition (AMD), manages dependencies and loads them 
// asynchronously. Simply declare modules and their dependencies up front.
// The file name becomes the module name, don't wrap code in 'module'.