1.
Introduction to TypeScript Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.com Copyright © 2012consulting training design debugging wintellect.com

2.
what we do consulting training design debugging who we are Founded by top experts on Microsoft – Jeffrey Richter, Jeff Prosise, and John Robbins – we pull out all the stops to help our customers achieve their goals through advanced software-based consulting and training solutions. how we do it Training • On-site instructor-led training Consulting & Debugging • Virtual instructor-led training • Architecture, analysis, and design services • Devscovery conferences • Full lifecycle custom software development • Content creation Design • Project management • User Experience Design • Debugging & performance tuning • Visual & Content Design • Video & Animation Productionconsulting training design debugging wintellect.com

3.
Agenda • JavaScript: The Problem • TypeScript: The Solution • Types • Interfaces • Classes • Modules • Before/After Exampleconsulting training design debugging wintellect.com

4.
JavaScript: The Problemconsulting training design debugging wintellect.com

5.
JavaScript – Why? • 1995 – Netscape, “make Java more accessible to non-Java programmers” • Goal was to make it easy to tie into page elements without the need for a compiler or knowledge of object-oriented design • Loosely-typed scripting language • Codenamed “Mocha” started out as “LiveScript” then renamed to “JavaScript” (oops, this caused a little bit of confusion, some think this was an intentional marketing move between Netscape and Sun) • Moved from manipulation of Java applets to manipulation of DOM elements • 1996 – Microsoft does this a little differently (surprise!) and releases VBScript and Jscript – IE 3.0 gets stuck behind the mainstream (1998) • 1997 - ECMAScript adopted (ISO in 1998) • 2006 – jQuery (no, it’s not JavaScript, but it is certainly ubiquitous)consulting training design debugging wintellect.com

6.
JavaScript – What? • Dynamic – variables are not bound to types, only values • Object-based (not oriented) – arrays and prototypes – myObj.foo = myObj[“foo”] • Interpreted, not compiled • Functional • Supports anonymous functions • Closures • Global scope • Unfortunately, not consistently implementedconsulting training design debugging wintellect.com

7.
Values are … What?! (1 of 2) false.toString(); [1,2,3].toString(); "2".toString(); 2.toString(); 02.toString(); 2 .toString();consulting training design debugging wintellect.com

8.
Values are … What?! (2 of 2) var one = 1; var one = [1,2,3]; one; one; typeof one; typeof one; var two = 2, var two = [1, 2, 3] two; two; typeof two; typeof two; var three = one + two; one[0] == two[0]; three; one[0] === two[0]; typeof three; var three = one + two; var three = Number(one) + typeof three; Number(two); three; typeof three; three; var three = one.concat(two); typeof three; three;consulting training design debugging wintellect.com

9.
Case Sensitive? At least tell me! var myObj = { foo : 1, Bar: 2 }; var result = myObj.foo + myObj.bar; typeof result; result;consulting training design debugging wintellect.com

10.
Parameters … more like “Guidelines” var myFunc = function(something) { console.log(something); return 1; }; myfunc(); myFunc(test); myFunc(myFunc); myFunc(test, myFunc); var myFunc = function() { console.log(Array.prototype.slice.call(arguments)); }; myFunc(); myFunc(test, 2);consulting training design debugging wintellect.com

11.
Scope is not a Block Party var foo = 42; function test() { foo = 21; console.log(foo); }; test(); foo; var foo = 42; function test() { var foo = 21; console.log(foo); }; test(); foo; for(var i = 0; i < 10; i++) { setTimeout(function() { console.log(i);}, 1000);}; for (var i = 0; i < 10; i++) { (function(e) { setTimeout(function() { console.log(e); }, 1000); })(i); };consulting training design debugging wintellect.com

12.
Who Knows How to Count? for (var x = 0; x < 5; x++) { console.log(x); } for (var x = 0; x < 5; ++x) { console.log(x); }consulting training design debugging wintellect.com

13.
Can You Guess the Result? (function() { logMe(); var logMe = function() { console.log(TypeScript is more than JavaScript.); }; logMe(); function logMe() { console.log(All JavaScript is valid TypeScript.); } logMe(); console.log(parseInt(0114624476)); })();consulting training design debugging wintellect.com

14.
Can You Guess the Result? Variable declaration was hoisted (function() { Function declaration was hoisted var logMe; function logMe() { console.log(All JavaScript is valid TypeScript.); } logMe(); logMe = function() { console.log(TypeScript is more than JavaScript.); } parseInt assumes Octal logMe(); logMe(); console.log(parseInt(0114624476)); })();consulting training design debugging wintellect.com

15.
TypeScript: The Solution • A language for application-scale JavaScript • Typed superset of JavaScript that compiles to plain JavaScript • All valid JavaScript is valid TypeScript! • Runs in any browser, host, and OS that supports JavaScript • Provides classes, modules, and interfaces to build robust components • Features available for development-time • Gain insight into existing libraries https://github.com/borisyankov/DefinitelyTyped • http://www.typescriptlang.orgconsulting training design debugging wintellect.com

16.
TypeScript: Types • Any • Number • Boolean • String • Null • Undefined • Object • Void • HTMLElement • Call Signatures • Casting • Types dont exist at runtimeconsulting training design debugging wintellect.com

17.
TypeScript: Interfaces • Set of type definitions • Definitions without implementations • No constructor definitions • No defaults • Parameters may be optional • No run-time representation; only development-time • Interfaces with the same signature are equivalent • May extend other interfaces • Interfaces dont exist at runtimeconsulting training design debugging wintellect.com

18.
TypeScript: Classes • Aligned with ECMAScript 6 specification • Named types with implementations • Class instance type and constructor function • May implement multiple interfaces • Supports inheritance • May have public and private members • Classes exist at runtime and are implemented as self-invoking functionsconsulting training design debugging wintellect.com

19.
TypeScript: Modules • Body of statements and declarations that create a singleton instance • May be exported • Internal modules are contained within other modules • External modules are separately loaded bodies of code • Exports declare publicly accessible module members • Imports introduce a local identifier to reference a module • Ambient declarations allow describing existing JavaScript with type definitions • Allows modules to be defined with declaration source files (*.d.ts)consulting training design debugging wintellect.com

20.
demo TypeScript: Event Aggregatorconsulting training design debugging wintellect.com

21.
demo TypeScript: Before and Afterconsulting training design debugging wintellect.com

22.
Questions? Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.comconsulting training design debugging wintellect.com