introduction to typescript
DESCRIPTION
JavaScript is a scripting language most commonly implemented in browsers that has been used for several decades now to enrich web-based applications. A a dynamically typed language that was rapidly developed for a narrow purpose, JavaScript has many nuances that make it difficult to manage in large enterprise applications. TypeScript was developed as the answer to provide a way to build large JavaScript applications without changing the language itself. TypeScript is a superset of JavaScript that provides mostly development-time features such as auto-completion, type checking, and discovery of interfaces. Learn from Wintellect principal consultant Jeremy Likness about the challenges JavaScript brings to enterprise development and how TypeScript provides an elegant solution through its implementation of types, interfaces, classes, modules and definitions.TRANSCRIPT
wintellect.comconsulting training design debugging
Introduction to TypeScript
Jeremy Likness (@JeremyLikness)Principal [email protected] Copyright © 2012
wintellect.comconsulting training design debugging
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.
Consulting & Debugging• Architecture, analysis, and design services• Full lifecycle custom software development• Content creation• Project management• Debugging & performance tuning
Training• On-site instructor-led training• Virtual instructor-led training• Devscovery conferences
Design• User Experience Design• Visual & Content Design• Video & Animation Production
what we do
who we are
how we do it
consulting training debuggingdesign
wintellect.comconsulting training design debugging
• JavaScript: The Problem• TypeScript: The Solution• Types• Interfaces• Classes• Modules• Before/After Example
Agenda
wintellect.comconsulting training design debugging
JavaScript: The Problem
wintellect.comconsulting training design debugging
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)
wintellect.comconsulting training design debugging
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
wintellect.comconsulting training design debugging
Values are … What?! (1 of 2)
false.toString();
[1,2,3].toString();
"2".toString();
2.toString();
02.toString();
2 .toString();
wintellect.comconsulting training design debugging
Values are … What?! (2 of 2)
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); typeof three;three;
wintellect.comconsulting training design debugging
Case Sensitive? At least tell me!
var myObj = { foo : 1, Bar: 2 };var result = myObj.foo + myObj.bar;typeof result;result;
wintellect.comconsulting training design debugging
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);
wintellect.comconsulting training design debugging
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); };
wintellect.comconsulting training design debugging
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);}
wintellect.comconsulting training design debugging
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'));})();
wintellect.comconsulting training design debugging
Can You Guess the Result?
(function() { var logMe; function logMe() { console.log('All JavaScript is valid TypeScript.'); } logMe(); logMe = function() { console.log('TypeScript is more than JavaScript.'); } logMe(); logMe(); console.log(parseInt('0114624476')); })();
Variable declaration was hoisted
Function declaration was hoisted
parseInt assumes Octal
wintellect.comconsulting training design debugging
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
wintellect.comconsulting training design debugging
TypeScript: Types• Any• Number• Boolean• String• Null• Undefined• Object• Void• HTMLElement• Call Signatures• Casting• Types don't exist at runtime
wintellect.comconsulting training design debugging
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
wintellect.comconsulting training design debugging
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
wintellect.comconsulting training design debugging
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)
wintellect.com
demo
consulting training design debugging
TypeScript: Event Aggregator
wintellect.com
demo
consulting training design debugging
TypeScript: Before and After
wintellect.com
Questions?
consulting training design debugging
Jeremy Likness (@JeremyLikness)Principal [email protected]