Download - HItchhickers Guide to TypeScript

1.The HITCHH GUIDE TO TYPESCRIPT Martin Beeby - @thebeebs Slides: https://bit.ly/londonjs-thebeebs

2. JAVASCRIPT ; 3. JAVA IS TO JAVASCRIPT AS CAR IS TO CARPET 4. http://bit.ly/vsonlineVISUAL STUDIO 5. TYPESCRIPT ALL OPEN SOUCE TO HELP BUILDING LARGE SCALE JAVASCRIPT APPLICATIOJNS 6. TYPESCRIPT WORKS IN ANY BROWSER AND IN ANY HOST. ITS ONLY DEPENDENCY IS JAVASCRIPT 7. BABEL FISH 8. http://www.typescriptlang.org npm install -g typescript > tsc yourfile.tsINSTALL WITH NODE 9. >> TSC greeter.tsSIDE BY SIDE 10. https://gist.github.com/thebeebs/8960828function process(x){ x.name = "foo"; var v = x + x; alert(v); }VANILLA JS 11. https://gist.github.com/thebeebs/8961828function process(x: string){ x.name = "foo"; var v = x + x; alert(v); }INTRODUCE 12. EDITORS/ID ES Compiler is Open SourceSublime/Vim/Emacs Visual Studio/Online 13. https://gist.github.com/thebeebs/8962419function process(x : number){ var v = x + x; alert(v); }NUMBER 14. https://gist.github.com/thebeebs/8962676function process(x: boolean){ var v = x + x; }BOOLEAN 15. https://gist.github.com/thebeebs/8962940STRING ARRAY 16. https://gist.github.com/thebeebs/8963929function process(x: () => string){ x().toLowerCase(); }PASS A FUNCTIONS 17. https://gist.github.com/thebeebs/8964006function process(x: {a: string; b: number}){ return x.a.length; }OBJECT LITERAL 18. https://gist.github.com/thebeebs/8964110interface Thing { a: number; b: string; } function process(x: Thing){ return x.b.length; }INTERFACE 19. https://gist.github.com/thebeebs/8964579 interface Thing { a: number; b: string; } function process(x: Thing){ return x.a; } var n = process({a: 10, b:'Beeby'}) n.toFixed(0.0);TYPE INFERENCE 20. https://gist.github.com/thebeebs/8964673 interface Thing { a: number; b: string; c: boolean; }function process(x: Thing){ return x.a; } var n = process({a: 10, b:'Beeby'}); n.toFixed(0.0);INTERFACE COMPILE 21. https://gist.github.com/thebeebs/8964846 interface Thing { a: number; b: string; c?: boolean; }function process(x: Thing){ return x.a; } var n = process({a: 10, b:'Beeby', c:'fail' }); n.toFixed(0.0);OPTIONAL MEMBERS 22. https://gist.github.com/thebeebs/8964901interface Thing { a: number; b: string; foo(x: string, n: number): string; } function process(x: Thing){ return x.foo("string",10); }FUNCTIONS ON 23. https://gist.github.com/thebeebs/8965003interface Thing { a: number; b: string; foo(x: string, n?: number): string; }function process(x: Thing){ return x.foo("string"); }FUNCTION OPTIONAL 24. https://gist.github.com/thebeebs/8965079OVERLOADS 25. https://gist.github.com/thebeebs/8965150 interface Thing { a: number; b: string; foo: { (x: string): string; (x: number): number; data: any; }; } function process(x: Thing){ return x.foo(2) }MODELING REAL 26. https://gist.github.com/thebeebs/8965207 interface Thing { a: number; b: string; foo: { (x: string): string; (x: number): number; data: any; }; new (s: string): Element; [index: number]: Date; } function process(x: Thing){ var date = x[0].getDate(); var el = new x("blah").clientWidth; return date; }MODEL 27. https://gist.github.com/thebeebs/8965565 interface Rapper { say(x: string): void; clear(): void; speak(): string; } function makeRapper(): Rapper{ var words; return { say: function (x: string){ words = x; }, clearSpeltWrong: function (){ words = '';}, speak: function(){return words;} }; }makeRapper();FUNCTION 28. https://gist.github.com/thebeebs/8965565ERRORS IN SUBLIME 29. https://gist.github.com/thebeebs/8966140DEFINITION FILES 30. FAT ARROWS => 31. http://www.typescriptlang.com/playground var Greeter =( function () { function Greeter(message) { this.greeting = message; } Greeter.prototype.greet = function () { return "Hello, " + this.greeting; }; return Greeter; })(); var greeter = new Greeter("world");CLASSES 32. TYPESCRIPT class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; } } var greeter = new Greeter("world");CLASSES 33. http://www.typescriptlang.com/playground interface Shape { name: string; width: number; height: number; color?: string; } function area(shape : Shape) { var area = shape.width * shape.height; return "I'm " + shape.name + " with area " + area + " cm squared"; }INTERFACES 34. PRIVATES 35. TYPESCRIPT class Animal { constructor(public name: string) { } move(meters: number) { alert(this.name + " moved " + meters + "m."); } }class Horse extends Animal { constructor(name: string) { super(name); } move() { alert("Galloping..."); super.move(45); } }INHERITENCE 36. http://www.typescriptlang.com/playground class Greeter { greeting: T; constructor(message: T) { this.greeting = message; } greet() { return this.greeting; } } var greeter = new Greeter("Hello World"); var button = document.createElement('button'); button.textContent = "Say Hello"; button.onclick = function () { alert(greeter.greet()); } document.body.appendChild(button);GENERICS 37. https://github.com/DefinitelyTypedRD 3PARTY LIBS 38. SO LONG AND THANKS FOR ALL THE FUNCTIONS 39. CONTACT MARTIN BEEBY @thebeebshttp://www.thebeebs.co.uk [email protected]