introduction to typescript

wintellect.comconsulting training design debugging

Introduction to TypeScript

Jeremy Likness (@JeremyLikness)Principal Consultantjlikness@wintellect.com 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 Consultantjlikness@wintellect.com