ict.ken.be

 

Introduction to TypeScript - Notes

Related Posts

Categories: Javascript Notes
Introduction to TypeScript
Anders Hejlsberg
There is a lot of fuss about 'the language' TypeScript. I personally think it is because most people did not have a clear look at it for themselves and already decided that just because it is from Microsoft it must not be good. Anyway, since I strongly believe that more and more enterprises are going to use javascript. Especially for mobile applications and response designs with html5 and websockets, it will lead to enormous code bases. Dynamic languages are great, but I do believe in typing models where it will benefit long run maintenance. Since TypeScript does exactly this (it is not a language but a tool for writing more robust javascript code) and for early adopters it will allow them to simple use the generated javascript files in case the tool is discontinued by Microsoft. I also think it makes more sense to use classes and interfaces and other structures like namespaces and modules, before compilation. This way the client browser is not bothered with handling those things (like would be the case when using for example backbone.js). There are other tools like Coffeescript, Dart, ... but I think TypeScript will allow plenty of people to transit from ASP.Net with c# development to more SPA development with structured javascript. Give it a try, at least until ECMAScript 6 will be supported by all major browsers :)
 
 
  • Javascript is missing Namespaces, Classes, Modules, Interfaces
  • TypeScript is a language for application scale JavaScript development.
  • Compiles to plain javascript.
  • Allows renaming/refactoring by type over your whole code base.
  • Intellisense and find reference.
  • Google closure is more like a type system in comments, while TypeScript incorporates anotations in the syntax.
  • TypeScript is open source written in TypeScript.
 
function process(x: string) {}

function process(x: number) {}
function process(x: bool) {}
function process(x: string[]) {}
function process(x: () => string) {} //x is a function that returns a string
function process(x: { a:number; b:string; }) {} 
 
interface IThing { 
	a:number; 
	b:string; 
	c?:bool; //c is an optional property
 
	foo(s: string):string;
	foo(s: number):number; //overloading is possible, but you need to check in your one foo to return the correct model
	//or so it has two overloads and a data property
	foo {
		(s: string):string;
		(s: number):number;
		data:any; 
	}
 
	new (s: string): Element; //constructor
 
	[index: number]: Date;
} 


function process(x: IThing) {} 
 
function Accumulator() : IAccumulator {}
  • The 'lib.d.ts' file contains the definitions for all classical javascript functions. (so you can use F12)
  • You can write or import these delaration files for other javascript frameworks like node.js, jquery, ...
class Point {

	x: number;
	y: number;


	private color: string;


	constructor(x: number, y: number) {
		this.x = x;
		this.y = y;
	}
	//or shortcut, so you do not have to declare and assign the properties	
	constructor(public x: number = 0, public y: number) {} 
 
	//Point.prototype.dist = function () {};
	dist() { return Math.sqrt(this.x * this.x + this.y * this.y); }


	//Object.defineProperty(Point.prototype, "dist", { get ... });
	get dist() { return Math.sqrt(this.x * this.x + this.y * this.y); }
 
	static origin = new Point(0,0);
}


var p = new Point(); p.x = 10; p.y = 20;
var p = new Point(10,20);
 
//inheritance
class Point3D extends Point {
	constructor(x: number, y: number, z:number) {
		super(x, y); //calls the base class	
	}
	dist() {
		var d = super.dist();
		return Math.sqrt(d * d + this.z * this.z);
	}
}
 
//auto self-this reference, by using arrow/lambda functions
class Tracker {
	count = 0;
	start() {
		window.onmousemove = e => {
			console.log(this.count);
		}	
	}
}
 
//internal modules (open ended, can be used as namespaces}
module MyCore.Utils {
	export class Tracker { ... }
}


var t = new MyCore.Utils.Tracker(); t.start();
 
import mu = MyCore.Utils;
var t = new mu.Tracker();
 
//external modules (commonjs and emd)
 
///<reference path="node.d.ts"/>
import http = module("http");
 
export function simpleServer(port: number, message: string) {
	http.createServer((req,res) => {
		res.writeHead(200, { "Content-Type": "text/html" });
		res.write("<h1>" + message + "</h1>");
		res.end();
	}).listen(port);
}
 
import server = module("./server");
server.simpleServer(1337, "Greetings Channel 9");
console.log("Listening...");
Examples
  • ImageBoard using TypeScript, node.js, express and mongoDB.
  • Warship using TypeScript and jQuery, jQueryUI