Downloaded 58 times
![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](https://image.slidesharecdn.com/wintellect-introductiontotypescript-jeremylikness-130111080037-phpapp01/75/Introduction-to-TypeScript-6-2048.jpg)
![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](https://image.slidesharecdn.com/wintellect-introductiontotypescript-jeremylikness-130111080037-phpapp01/75/Introduction-to-TypeScript-7-2048.jpg)
![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](https://image.slidesharecdn.com/wintellect-introductiontotypescript-jeremylikness-130111080037-phpapp01/75/Introduction-to-TypeScript-8-2048.jpg)
Uploaded byJeremy Likness
Introduction to TypeScript
The document is an introduction to TypeScript by Jeremy Likness, outlining its advantages as a typed superset of JavaScript, which compiles to standard JavaScript and runs in any environment that supports it. It highlights TypeScript's features such as classes, interfaces, and modules that help in constructing robust applications, contrasting the limitations of JavaScript. The document also covers the history of JavaScript and provides insights into its dynamic nature and issues around types and scope.
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? Atleast 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 … morelike “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 nota 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 Howto 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 Guessthe 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 Guessthe 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
- #8 false.toString();[1,2,3].toString();"2".toString();2.toString(); 02.toString();2 .toString();
- #9 var one = 1;one;typeof one;var two = '2',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 = ['1', '2', '3']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;
- #10 varmyObj = { foo : 1, Bar: 2 };var result = myObj.foo + myObj.bar;typeof result;result;
- #11 varmyFunc = function(something) { console.log(something); return 1; };myfunc();myFunc('test');myFunc(myFunc);myFunc('test', myFunc);varmyFunc = function() { console.log(Array.prototype.slice.call(arguments)); };myFunc();myFunc('test', 2);
- #12 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 < 10; i++) { setTimeout(function() { console.log(i);}, 1000);};for (vari = 0; i < 10; i++) { (function(e) { setTimeout(function() { console.log(e); }, 1000); })(i); };
- #13 for (var x = 0; x < 5; x++) { console.log(x); }for (var x = 0; x < 5; ++x) { console.log(x);}
- #14 (function() {logMe();varlogMe = function() { console.log('TypeScript is more than just JavaScript.'); };logMe(); function logMe() { console.log('All JavaScript is valid TypeScript.'); }logMe(); console.log(parseInt('0114624476'));})();
- #17 function Add(x: any, y: any): any { return x + y;}function AddNumbers(x: number, y: number): number { return x + y; }Add("this", "that"); AddNumbers("this", "that"); function toDomElement(func: () => string): string { return func();}toDomElement(function () { return "this"; });function toDomElement(parm: string): HTMLElement { return <HTMLElement>parm; }
- #18 interface IMessage { subscribe(callback: (payload?: any) => void): number; unSubscribe(id: number): void; notify(payload?: any): void;}interface ILogger { log(message: any): void;}interface IMessageWithLogging extends IMessage, ILogger {}
- #19 interface HasLength { length: () => 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);}
- #20 module Points { export interface HasLength { length: () => 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);