index.html

<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>TypeScript Deep Dive</title>

		<meta name="description" content="Typescript Education">
		<meta name="author" content="Basarat Ali Syed">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<link rel="stylesheet" href="css/reveal.min.css">
		<link rel="stylesheet" href="css/theme/source/skybold.css" id="theme">

		<!-- For syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- If the query includes 'print-pdf', use the PDF print sheet -->
		<script>
			document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->

	</head>

	<body>
		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">


            <section class="git" data-state="git">
					<h1>TypeScript</h1>
                    <h2>Deep Dive</h2>                    
					<p>Specification * Recommendations * Patterns</p>
					<br/>
					<p>Press Space neo</p>
					<br/>
					<p>
						<small>Originally by <a href="http://basarat.com">BAS (Basarat Ali Syed)</a> / <a href="http://twitter.com/basarat">@basarat</a></small>
					</p>
				</section>

				<section>
					<h2>What does typescript provide?</h2>
                    <ul>
                        <li>Strong Typing</li>
                        <li>Better Syntax</li>
                    </ul>
					<aside class="notes">
                        The two things typescript provides
					</aside>
				</section>


				<!-- Example of nested vertical slides -->
				<section>
                    <section>
					    <markdown>
Strong Typing
---

- Interfaces
- Inline typing (type declarations)
- Ambients
 - Variable
 - Functions
 - Classes
 - Modules

	
					    </markdown>
                    </section>
				</section>
				
				<section>
					<section><h1>Interfaces</h1> What do you want from me?</section>	
					
					<section>
						<h2>Interfaces</h2>
						<codeseg>
interface fooInterface{
    // constructor
    new (fooParam1:number,fooParam2?):number;

    // call signature callable without new
    (fooParam1:any):string;

    // indexable
    [index:string]:number;
}
                        </codeseg>
					</section>
                    <section>
						<h2>Interfaces</h2>
						<codeseg>
interface fooInterface{
    // functions with overloads
    fooFunc1(fooParam1:bool):any;
    fooFunc2(...fooParam1:number[]):any;
    fooFunc3:(fooParam1:bool)=>any;

    // variables
    fooVar1:number;
    fooVar2?:Array;

    // array
    fooArr1:{
        [index:string]:number;
    };
    fooArr2:number[];
}
                            </codeseg>
					</section>
					<section>
						<h2>Open Ended</h2>
						<codeseg>
interface foo{
	x:number;
}
interface foo{
	y:number;
}
var bar:foo = {
	x:123,
	y:123	
}
						</codeseg>
					</section>
				</section>
				
				<section>
					<section>
						<h1>Declaration</h1>What is that?
					</section>
					<section> 
						<h2>Type Annotation</h2>
						<codeseg>
var x:number;
var y:string;
var z:number[];
var foo:{a:any;b:()=>any;} // powerful inline declaration
						<codeseg>						
					</section>
					
					<section>
						<h2>inline declarations</h2>
						Offer the complete Interface syntax but inline. Syntax:
						<codeseg>
var __varname__: { 
	__membername__ : __membertype__ ;
	__membername__ : __membertype__ ;
	// Repeat
}
						</codeseg>
						e.g:
						<codeseg>
var x:{ 
	() : Function; 
	[foo:string]: number;
	new() : string;
}
						</codeseg>
					</section>		
					
					<section>
						<h2>Function signature</h2>
						<codeseg>
// interface / inline interface implementation
interface fooInterface{	
	simpleSyntax():void;
	lambdaSyntax:()=>void;
}

var fooInline:{	
	simpleSyntax():void;
	lambdaSyntax:()=>void;
}
						</codeseg>
						Lambda signature is required for function signatures in vars / parameter type declarations. 
					</section>		
					<section>
						<h2>Function signature for callables</h2>
						A bit inconsistent.
						<codeseg>

// Simple function, When declaring a var or function arguments
var x1 : (s: string)=>string; 
// When saying something is callable
var x2 : { (s: string): string; }
interface x3{
	(s:string):string;
}

// Errors:
var y1 : (s: string):string;
var y2: { (s: string)=> string; }
interface y3{
	(s:string)=>string;
}
					</codeseg>
					</section>
					<section> 
						<h2>Type Inference</h2>							
						<codeseg>
var x = 123;
var y; 
y = 123;

x = "asdf"; 
y = "asdf"; 

var z={foo:123}
						</codeseg>
						What type is y?
						Does the compiler give an error in this code segment?
					</section> 
					
					<section>
						<h2>any</h2>							
						<codeseg>
var x:any;
var y:number = x;
x = y;	
						</codeseg>
						Can be assigned to anything. Can be assigned anything. 						
					</section>			
					
					<section>
						<h2>null, undefined</h2>							
						Typescript: For compiler (not runtime) both are type any. 						
						<codeseg>
var x = null;
var y = undefined;		
						</codeseg>
						Javascript: null is an object instance to mean nothing. undefined is a type as well as a value for something not initialized. 
						<codeseg>
var TestVar;
alert(TestVar); //shows undefined
alert(typeof TestVar); //shows undefined

var TestVar = null;
alert(TestVar); //shows null
alert(typeof TestVar); //shows object
						</codeseg>						
					</section>			
						
					<section>
						<h2>Which string is that?</h2>
						<codeseg>
var obj:String = "123";
var primitive:string = "123";

obj=primitive; // exactly what the first line is doing
primitive=obj; // Error  
						</codeseg>
						Recommendation: Just use string.
					</section>
				</section>
					
				<section>			
				
					<section><h1>Ambients</h1>I thought I saw a pussy cat</section>
					<section>
						<h2>Ambients</h2>
<markdown>The magical keyword is ***declare***.

Generate no code whatsoever so obviously

- no variable initializer
- no function bodies / no default parameters</markdown>
					</section>
                    <section>
                        <h2>Ambients</h2>
                        <codeseg>
declare var angular;
declare function foo(takes:string):number;
declare class Fancy{
    notMuch:string;
}
					</codeseg>
                    </section>

				</section>

                <section>
                    <section>
                    <h2>Better Syntax</h2>
<markdown>- Function signatures
 - Optional parameters
 - Rest parameters
 - Default parameters
 - Arrow Functions
- Classes
 - super
 - public / private
- Modules
 - Internal
 - AMD / CommonJS</markdown>
                    </section>
                </section>

				<section>
					<section>
						<h1>Functions</h1>
						are actually functions
					</section>					
					<section>
						<h2> Optional </h2> 
						??????
						<codeseg> 
function foo(req:string,optional?:number){}
						</codeseg>
					</section>
					<section>
						<h2>Default</h2> 
						<p>Effectively optional. Can even do expressions</p>
						<codeseg> 
function foo( req:string, def:number=3, optional=req+def ) { } 
						</codeseg>
						Generates: 
						<codeseg>
function foo(req, def, optional) {
    if (typeof def === "undefined") { def = 3; }
    if (typeof optional === "undefined") { optional = req + def; }
}				
						</codeseg>
					</section>
					<section>
						<h2>Rest</h2>
						<markdown>
params denoted by ... 
 
- explicitly type declared 
- have to be last
						</markdown>
						<codeseg>
function foo(req:string,...blabla:any[]){}
						</codeseg> 
						becomes
						<codeseg>
function foo(req) {
    var blabla = [];
    for (var _i = 0; _i < (arguments.length - 1); _i++) {
        blabla[_i] = arguments[_i + 1];
    }
}
						</codeseg>
					</section> 
					<section>
						<h2>Function overloading</h2>
						<codeseg>
interface IFoo{
    test(x:string);
    test(x:number);
}
						</codeseg>
					</section>
					<section>
						<h2>Function overloading</h2>
						The actual function should be able to accept any of the overload members.
						<codeseg>
class Foo implements IFoo {
    test(x: string);
    test(x: number);
    test(x: any) {
        if (typeof x === "string") {
            //string code
        } else {
            //number code
        }
    }
}
						</codeseg>
						The overloads go through the same code generation restrictions e.g you cannot define default values etc. Also the final signature is not directly callable from typescript since its generally an over generalized implementation (any etc).
					</section>
					<section>
						<h2>Function overloading</h2>
						How to handle variable parameters
						<codeseg>
function f():number; // Error 
function f(x:any):any{
}

function g():number; // Okay 
function g(x?:any):any{
}

						</codeseg>
						Don't need to be in a class. 						
						
					</section>
					
					<section>
						<h2>Function Instances</h2>
						<codeseg>
// global or module 
function simpleSyntax():void{}
var lambdaSyntax1=():void=>{}

// class , basically remove function or var
class fooClass{
	simpleSyntax():void{}
	lambdaSyntax=():void=>{}	
}

// object literal 
var fooObject={
	simpleSytax: function():void{},
	lambdaSyntax: ():void=>{}	
}
// Reminder the lambda based signature was a bit different: 
// lambdaSyntax:()=>void;
						</codeseg> 
					</section>		
					
				</section>
				<section>
					<section>
						<h1>Class</h1>
						Now called class 
					</section>
					<section>
						<h2>Basic</h2>						
						<codeseg>
class Foo{
	public member:number;
	
	static stat:number = 123;
	
	constructor(){this.member = 123;}
	
	func(){
		this.member = 256;
	}
}
						</codeseg>
						Note: to access members you ALWAYS have to use this
					</section>
					<section>
						<h2>Basic</h2>
						<codeseg>
var Foo = (function () {
    function Foo() {
        this.member = 123;
    }
    Foo.stat = 123;
    Foo.prototype.func = function () {
        this.member = 256;
    };
    return Foo;
})();

						</codeseg>	
					</section>
					<section>
						<h2>Basic</h2>
						<codeseg>
class Foo{
	
	constructor(public member){this.member = 123;}
	
	func(){
		this.member = 256;
	}
}
						</codeseg>
					</section>
					<section>
						<h2>Cool: Member not generated</h2>
						<codeseg>
class Foo{
	public member:number;
}						
						</codeseg>						
						becomes: 
						<codeseg>
var Foo = (function () {
    function Foo() { }
    return Foo;
})();
						</codeseg>						
					</section>					
					
					<section>
						<h2>Interface implementation</h2>
						Primarily for the person implementing the class. The class can be used in place of the interface even if it doesn't explictly implement that interface. 
						<codeseg>
interface iFoo{
	x:number;
}
class Foo1 implements iFoo{
	x:number;
}
class Foo2{
	x:number;
}

var la:iFoo;
la = new Foo1();
la = new Foo2(); 
						</codeseg> 
					</section>		

					<section id="classlimits">
                        <h2>Syntax Limitations</h2>
                        <p>
                            Not everthing that can be declared in an interface can be implemented by a Typescript class e.g. Indexible, call signatures
                        </p>
						<codeseg>
interface WidgetMap {
    [name: string]: Widget;
}

var map: WidgetMap = {};
map['gear'] = new GearWidget();
var w = map['gear']; // w is inferred to type Widget
						</codeseg>
                    </section>
                    
                    	<section>
                        <h2>Syntax Limitations</h2>
                        <p>
                            Callable example
                        </p>
						<codeseg>
interface Foo {
    (): any;
    (value: any): void;
}

function createFoo(): Foo {
    var getFunc = () => { console.log("get"); return "foo"; }
    var setFunc = (value: any) => { console.log("set"); }

    return (value?: any) => {
        if (value) {
            setFunc(value);
        } else {
            return getFunc();
        }
    }
}

var f = createFoo();
f("bar");
f();
						</codeseg>
                    </section>
					
					<section>
						<h2>Optional members?</h2>						
						<codeseg>
interface foo{
	x?:number;
}

class boo1 implements foo{		
}

class boo2 implements foo{
	x:number;	
}
						</codeseg>
					</section>
					
				</section>
				
				<section>
					<section id="super">
						<h1>Class Inheritance</h1>
						<strong>super</strong> : Not the Australian kind. 
					</section>			
					
					<section>
						<h2>Basic</h2>
						<codeseg>
class FooBase{	 
}

class FooChild extends FooBase{	
}						
						</codeseg> 
					</section>
					
					<section>
						<h2>Basic</h2>
						<codeseg>
var __extends = this.__extends || function (d, b) {
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var FooBase = (function () {
    function FooBase() { }
    return FooBase;
})();
var FooChild = (function (_super) {
    __extends(FooChild, _super);
    function FooChild() {
        _super.apply(this, arguments);

    }
    return FooChild;
})(FooBase);
						</codeseg> 
					</section>
					<section>
						<h2>Static is Broken</h2>
<codeseg>
var __extends = this.__extends || function (d, b) {
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
</codeseg>
vs.
<codeseg>
var __extends = this.__extends || function(d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function f() { this.constructor = d; }
    f.prototype = b.prototype;
    d.prototype = new f();
}
</codeseg> 
<a href="http://typescript.codeplex.com/workitem/825">work item</a>
					</section>
					
					
					<section>
						<h2>super</h2>						
						<codeseg>
class base {
	test(foo:number){
		console.log(foo);
	}
}
class child extends base{
	constructor(public x:number){
		super();				 	
		super.test(x); // 15
		this.test(x); // 25 		
	}
	test(foo:number){
		console.log(foo+10);
		
	}
}
var test=new child(15);
						</codeseg>
					</section>
					
					<section>
					<h2>super</h2>
					super called via call<br/>super (dot) goes directly to prototype
					<codeseg>
function child(x) {
	_super.call(this);
	this.x = x;
	_super.prototype.test.call(this, x);
	this.test(x);
}					
					</codeseg>
					</section>
					<section>
						<h2>Super Cautious</h2>
						<codeseg>
class A{
	fooMem=10;	
}
class B extends A{
	constructor(){
		console.log(this.fooMem); // undefined 
		super();		
		console.log(this.fooMem);
		console.log(super.fooMem); // undefined 		
	}
};
var test = new B();						
						</codeseg>						
						Make super first call and only use for function access afterwords. 
					</section>
				</section> 
				
				<section>
					<section id="this"><h1>this</h1> which one? </section>					
					<section>						
						<h2>Save me</h2>
						<markdown>
						Typescript knows. But doesn't mean it will save you.  
						
- Constructor / member functions
 - *this* a type of containing class 
- Static functions
 - *this* is of type constructor function
- All other places its any
						</markdown>
					</section>
					<section>
						<h2>Err</h2>
						Typescript will complain if you miss this. It will say member not defined. So novice way is to put in this. 
						<codeseg>
class Example{
	member = 10; 
	constructor(){		
		// Could have been an jquery call
		// you were porting from js
		setTimeout(function() {
			alert(this.member);
		},100);
	}	
}
var ex = new Example();
						</codeseg>
						But this code is wrong since "this" is any and not the class instance. 
					</section>
					<section>
						<h2>Arrow Functions</h2>
						<codeseg>
// all of these are the same
var test1=(x:number)=>{return x*10};
var test2=(x:number)=>(x*10);
var test3=(x:number)=>x*10;
var test4=(x)=>x*10;
var test5=x=>x*10;

// {} require a return statement
// This is actually returning undefined
// which is a valid number and fails silently 
var test6=(x:number)=>{x*10};						
						</codeseg>						
					</section>						
						<section>
						<h2>Arrow Functions</h2>
							For lexical scoping.
						<codeseg>
var foo = () => {return this;}					
						</codeseg>
					generates:
						<codeseg>
var _this = this;
var foo = function () {
    return _this;
};					
						</codeseg>
					</section>
					<section>
						<h2>Err Fix</h2>						
						<codeseg>
				
class Example{
	member = 10; 
	constructor(){		
		// Could have been an jquery call
		// you were porting from js
		setTimeout(()=>{
			alert(this.member);
		},100);
	}	
}
var ex = new Example();
					</section>
					<section>
						<h2>So basically</h2>											
						Replace all functions in arguments with ()=> 
					</section>
					<section>
						<h2>Almost</h2>
						<markdown>
Keep functions for: 

- When you want this to be any. E.g. $.each. 
- When you need both. Then resort to the manual closure trick of  var self = this; 
						</markdown>
					</section>
					<section>
						<h2>Pattern</h2>
						When your class is just a collection of functions other people would call. 
						
						<codeseg>
class Example{
	func1:(number)=>void;
	func2:()=>number;
	
	member:number = 10;
	
	constructor(){
		this.func1=(x)=>{this.member=x};
		this.func2=()=>this.member;		
	}
}
						</codeseg>
						The body needs to seperate from declaration since this is only available in constructor / member functions.
						<br><br>Useful for libs like knockout. 
					</section>
					
				</section> 		
				
				<section>
					<section><h1>Internal Module</h1>Fetch boy!</section>					
					<section>
						<h2>Internal Modules</h2>
						Like namespaces in C# but it is actually a singleton instance. 
						<codeseg>
module M{
	var s = "test"
	export function f(){
		return s;
	}	
}
						</codeseg>						
						Just the <em>export</em> keyword						
					</section>
					<section>
						<h2>Internal Modules</h2>
						The variables inside the variables are only available to the current body of the module via closure. 
						<codeseg>
// Generated
var M;
(function (M) {
    var s = "test";
    function f() {
        return s;
    }
    M.f = f;
})(M || (M = {}));
						</codeseg>						
						I say current body since modules are also open ended and can therefore have more than one bodies. 
					</section>
					
					<section>
						<h2>Internal Modules</h2>
						<codeseg>
module M{
	export var s = "test"
}
module M{
	export var n = 123;
}
						</codeseg>
						generates: 
						<codeseg>
var M;
(function (M) {
    M.s = "test";
})(M || (M = {}));
var M;
(function (M) {
    M.n = 123;
})(M || (M = {}));
						</codeseg>
					</section>
					
					<section>
						<h2>Quick nesting</h2>
						<codeseg>
module A.B.C{
	
}
// same as
module A{
	export module B{
		export module C{
			
		}
	}
}
						</codeseg>
						And you can have this side by side as modules are open ended. 
					</section>				
					
					<section>
						<h2>Aliasing</h2>						
						<codeseg>
module x.y.z{
	export var n =10;
}
// Alias 
import foo = x.y.z;
console.log(foo.n);
						</codeseg>
						generates:
						<codeseg>
var foo = x.y.z;
console.log(foo.n);
						</codeseg> 
					</section>
					
					<section>
						<h2>Careful with naming</h2>
						<codeseg>
module Test{
	export class Test{		
	}
}							
						</codeseg>
						<codeseg>
							var Test;
(function (Test) {
    var Test = (function () {
        function Test() { }
        return Test;
    })();
    Test.Test = Test;    
})(Test || (Test = {}));
						</codeseg>
Tip: Do not reuse the module name inside the module
					</section>
					
					<section id="declarationspaces">
						<h2>Declaration Spaces</h2>
						<markdown>
- Types are contributed by interface , module , class.
- Class and module also contribute a variable (constructor for class , instance for module) 
</markdown>						
					</section>

					<section>
						<h2>Declaration Spaces</h2>
						"The name does not exist in the current scope". 
						<codeseg>
module M
{
    export interface P {}
}

import im = M; 
var foo1:im.P; // Okay 

var vm = M;
var foo2:vm.P; // Error 
						</codeseg>
						You will still get autocomplete. 
					</section>

				</section> 	
				
				<section>
					<section><h1>Structural Typing</h1>Perhaps I can give you something else?</section>					
					
					<section>
						<h2>Class have their own brand</h2>
						<codeseg>
interface iFoo{
	x:number;
}
class Foo1 implements iFoo{
	x:number;
}
class Foo2{
	x:number;
}

var la:iFoo;
la = new Foo1();
la = new Foo2(); 

var fa:Foo1 = new Foo2(); //Error 
						</codeseg>
					</section>
					
					<section>					
					<h2>That brand is too mainstream</h2>
Everything else <b>modules</b>, <b>interfaces</b>, <b>inline</b> declarations and <b>inferred</b> structures are behaviour free. 
					<codeseg>
interface inter{
	foo:number;
}
module mod{
	export var foo:number;
}

var w:inter;
var x:mod;
var y:{foo:number;}
var z={foo:123}

w=x=y=z;
z=y=x=w;
					</codeseg> 
					</section>
					
					<section>
						<h2>Its okay to have more</h2>
						<codeseg>
interface inter{
	foo:number;
}

var x:inter;

var y={
	foo:123,
	la:23
};

x = y;
y = x; //Error
					</codeseg>
					</section>
				</section> 			

				<section>
					<section><h1>Extending Built-ins</h1> You get it, I get it, But does the compiler get it?</section>					
					<section>
						<h2>Built-in Interfaces</h2>
						<markdown>
Present in lib.d.ts that ships with the typescript compiler. 						
						</markdown>
						<codeseg>
interface Array {
    toString(): string;
    toLocaleString(): string;
    concat(...items: _element[][]): _element[];
    concat(...items: _element[]): _element[];
    join(seperator?: string): string;
						</codeseg>
					</section>
					
					<section>
						<h2>Extend them</h2>
						Its just javascript
						<codeseg>
interface Array {
  shuffle: () => any; // <-- Whatever signature you want.
}

Array.prototype.shuffle = function () { ... };
						</codeseg>						
						Prototype is an implicitly available static variable on any <em>type</em> and cannot be declared manually.
					</section>
					
				</section> 				

				<section>
					<section><h1>Type Assertion</h1>Cause I said so!</section>					
					<section>
						<h2>As simple as it gets</h2>
						<codeseg>
// error 
var x:HTMLCanvasElement	= document.getElementById("canvasId");
// valid 
var y:HTMLCanvasElement = 
	< HTMLCanvasElement > document.getElementById("canvasId");
// type inferred 	  
var z = 
	&lt; HTMLCanvasElement &gt; document.getElementById("canvasId");
						</codeseg>
						Should not be called type casting.
					</section>
				</section> 				
				
				
				<section>
					<section id="declarations"><h1>Interfaces FTW</h1>1,2,3, Bottoms up!</section>					
					<section>
						<h2>JQuery 1</h2>
						<codeseg>
declare var $: any;
						</codeseg>
						Any
					</section>
					<section>
						<h2>JQuery 2</h2>
						<codeseg>
declare var $: JQueryStatic;
						</codeseg>
						<codeseg>
interface JQueryStatic {
    // AJAX
    ajax(...params:any[]);
						</codeseg>
						Start with rest parameters.
					</section>
					<section>
						<h2>JQuery 3</h2>
						<codeseg>
declare var $: JQueryStatic;
						</codeseg>
						<codeseg>
interface JQueryStatic {
    // AJAX
    ajax(settings: JQueryAjaxSettings);
    ajax(url: string, settings: JQueryAjaxSettings);			
						</codeseg>
						<codeseg>					
interface JQueryAjaxSettings {
    accepts?: any;
    async?: bool;
    beforeSend? (jqXHR: JQueryXHR, settings: JQueryAjaxSettings);
    cache?: bool;
						</codeseg>
						Use optional liberally.
					</section>
					
					<section>
						<h2>Its open ended</h2>
						<codeseg>
interface JQueryStatic {
    // More traditional members: Callables
    (selector: string, context?: any): JQuery;
    (element: Element): JQuery;
    (object: {}): JQuery;
    (elementArray: Element[]): JQuery;
    (object: JQuery): JQuery;
    (func: Function): JQuery;
    (): JQuery;
						</codeseg>
						<codeseg>
interface JQuery {
    attr(attributeName: string): string;
    attr(attributeName: string, value: any): JQuery;
    html(htmlString: string): JQuery;
    html(): string;
						</codeseg>
						Plugin: 
						<codeseg>
interface JQuery {
    myPlugin(): JQuery;
}						
						</codeseg>						
					</section>
					<section>
						<h2>Multiple Optionals</h2>
						Jquery: 
						<codeseg>
.fadeToggle( [duration ] [, easing ] [, complete ] )
						</codeseg>
						TypeScript:
						<codeseg>
fadeToggle(duration?: any, callback?: any): JQuery;
fadeToggle(duration?: any, easing?: string, callback?: any): JQuery;
						</codeseg>
					</section>
				</section>

				<section>
					<section id="modellingstatics"><h1>Pattern</h1><h2>Modelling Statics</h2></section>						
					<section>
						<h2>Sample Class</h2>
						Suppose you have javscript class with equivalent behaviour: 
						<codeseg>
class Test{
	static foo = 123;
	bar = 456;
}
						</codeseg>
					</section>					
					<section>
						<h2>Simple solution</h2>
						What the compiler will generate with --declaration flag: 
						<codeseg>
declare class Test {
    static foo: number;
    public bar: number;
}
						</codeseg>
						Not open ended!
					</section>
					<section>
						<h2>Manual solution</h2> 
						Remember <a href="#/declarationspaces">declaration spaces</a>? Add one to to each space:
						<codeseg>
// Non static members 
interface Test{	
	bar:number;
}
						
// Static members and constructors go here: 			
interface TestStatic {
	new():Test;
	foo:number;
}
declare var Test:TestStatic;
						</codeseg> 
						And its open ended.
					</section>
				</section>
				<section>
					<section class="git"><h1>Finally</h1>One Final Note</section>					
					<section class="git">
						<h2>This presentation uses TypeScript</h2>
						This presentation uses TypeScript with Javascript (RequireJS + AngularJS) and encourage you to look at the source on github.						
					</section>
				</section> 				
<!--				
				<section>
					<section><h1>Template</h1></section>					
					<section class="git">
						<h2>template</h2>
						Your contribution to these slides are valued. 
						<codeseg>
var yourCode;
						</codeseg>
					</section>
				</section> 				


				<section>
                    <section><h1>Todo</h1></section>
                    <section>
				Also,
				external modules 
				Project origaniztion for external definitions. // reference d.ts

				also these slides are good for learning ts + angular + requirejs
				directives added for easier editing: codeseg / markdown
                    </section>
				</section>
				-->

				<section class="git" data-state="git">
					<h1>THANK YOU</h1>
					<h2>BAS</h2>
                    <h3>(Basarat Ali Syed)</h3>
					bas AT basarat.com<br><br>
                    <a href="http://basarat.com">basarat.com</a><br>
					<a href="http://twitter.com/basarat">@basarat</a><br/>					
				</section>

			</div>

		</div>

        <a class="github" href="https://github.com/basarat" target="_blank"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

		<script src="lib/js/head.min.js"></script>
		<script src="lib/reveal.js"></script>
		<script src="lib/jquery.js"></script>
        <script type="text/javascript" data-main="./scripts/main.js" src="lib/require.js"></script>

		<script>

			// Full list of configuration options available here:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,

				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
				transition: Reveal.getQueryHash().transition || 'concave', // default/cube/page/concave/zoom/linear/fade/none

				// Optional libraries used to extend on reveal.js
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
					{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
					// { src: 'plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
					// { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
				]
			});

		</script>

        <!--Custom Scripts-->
        <script>

            Reveal.addEventListener( 'slidechanged', function(data) {
                var currentSlide = $(data.currentSlide);

                // show git?
                var git = $(".github");
                if(currentSlide.hasClass("git"))
                    git.fadeIn();
                else
                    git.fadeOut();
            } );

        </script>

	</body>
</html>