Advertisement

Introduction to TypeScript

Sr. Cloud Developer Advocate at Microsoft
Jan. 11, 2013
Advertisement

More Related Content

Advertisement

Introduction to TypeScript

  1. Introduction to TypeScript Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.com Copyright © 2012 consulting 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 Production consulting training design debugging wintellect.com
  3. Agenda • JavaScript: The Problem • TypeScript: The Solution • Types • Interfaces • Classes • Modules • Before/After Example consulting training design debugging wintellect.com
  4. JavaScript: The Problem consulting 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 implemented consulting 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.org consulting training design debugging wintellect.com
  16. TypeScript: Types • Any • Number • Boolean • String • Null • Undefined • Object • Void • HTMLElement • Call Signatures • Casting • Types don't exist at runtime consulting 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 don't exist at runtime consulting 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 functions consulting 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 Aggregator consulting training design debugging wintellect.com
  21. demo TypeScript: Before and After consulting training design debugging wintellect.com
  22. Questions? Jeremy Likness (@JeremyLikness) Principal Consultant jlikness@wintellect.com consulting training design debugging wintellect.com

Editor's Notes

  1. false.toString();[1,2,3].toString();&quot;2&quot;.toString();2.toString(); 02.toString();2 .toString();
  2. var one = 1;one;typeof one;var two = &apos;2&apos;,two;typeof two;var three = one + two;three;typeof three; var three = Number(one) + Number(two);typeof three;three;var one = [1,2,3];one;typeof one;var two = [&apos;1&apos;, &apos;2&apos;, &apos;3&apos;]two;typeof two;one[0] == two[0];one[0] === two[0];var three = one + two;typeof three;three;var three = one.concat(two);three;typeof three;
  3. varmyObj = { foo : 1, Bar: 2 };var result = myObj.foo + myObj.bar;typeof result;result;
  4. varmyFunc = function(something) { console.log(something); return 1; };myfunc();myFunc(&apos;test&apos;);myFunc(myFunc);myFunc(&apos;test&apos;, myFunc);varmyFunc = function() { console.log(Array.prototype.slice.call(arguments)); };myFunc();myFunc(&apos;test&apos;, 2);
  5. var foo = 42;function test() { foo = 21; console.log(foo); };test();foo;(clear the screen) var foo = 42;function test() { var foo = 21; console.log(foo); };test();foo; for(vari = 0; i &lt; 10; i++) { setTimeout(function() { console.log(i);}, 1000);};for (vari = 0; i &lt; 10; i++) { (function(e) { setTimeout(function() { console.log(e); }, 1000); })(i); };
  6. for (var x = 0; x &lt; 5; x++) { console.log(x); }for (var x = 0; x &lt; 5; ++x) { console.log(x);}
  7. (function() {logMe();varlogMe = function() { console.log(&apos;TypeScript is more than just JavaScript.&apos;); };logMe(); function logMe() { console.log(&apos;All JavaScript is valid TypeScript.&apos;); }logMe(); console.log(parseInt(&apos;0114624476&apos;));})();
  8. function Add(x: any, y: any): any {    return x + y;}function AddNumbers(x: number, y: number): number {    return x + y; }Add(&quot;this&quot;, &quot;that&quot;); AddNumbers(&quot;this&quot;, &quot;that&quot;); function toDomElement(func: () =&gt; string): string {    return func();}toDomElement(function () { return &quot;this&quot;; });function toDomElement(parm: string): HTMLElement {    return &lt;HTMLElement&gt;parm; }
  9. interface IMessage {    subscribe(callback: (payload?: any) =&gt; void): number;    unSubscribe(id: number): void;    notify(payload?: any): void;}interface ILogger {    log(message: any): void;}interface IMessageWithLogging extends IMessage, ILogger {}
  10. interface HasLength {    length: () =&gt; number;}class Point implements HasLength {    private originalX: number;     private originalY: number;    constructor(public x: number, public y: number) {        this.originalX = x;        this.originalY = y;     }    public length() { return Math.sqrt(this.x * this.x + this.y * this.y); }    static origin = new Point(0, 0);}function Distance(point1: Point, point2: Point): number {    var x = point2.x - point1.x;    var y = point2.y - point1.y;    return Math.sqrt(x *x + y * y);}console.log(Distance(new Point(0, 0), new Point(5, 5)));// console.log(Point.origin.originalX);class Point3D extends Point {    constructor(public x: number, public y: number, public z: number) {        super(x, y);    }    static origin3D = new Point3D(0, 0, 0);}
  11. module Points {    export interface HasLength {        length: () =&gt; number;    }    export class Point implements HasLength {        private originalX: number;        private originalY: number;        constructor(public x: number, public y: number) {            this.originalX = x;            this.originalY = y;        }        public length() { return Math.sqrt(this.x * this.x + this.y * this.y); }        static origin = new Point(0, 0);    }    function Distance(point1: Point, point2: Point): number {        var x = point2.x - point1.x;        var y = point2.y - point1.y;        return Math.sqrt(x * x + y * y);    }    console.log(Distance(new Point(0, 0), new Point(5, 5)));    // console.log(Point.origin.originalX);    class Point3D extends Point {        constructor(public x: number, public y: number, public z: number) {            super(x, y);        }        static origin3D = new Point3D(0, 0, 0);    }    }var point = new Points.Point(1, 2);
Advertisement