Introduction to TypeScript

wintellect.comconsulting training design debugging

Introduction to TypeScript

Jeremy Likness (@JeremyLikness)Principal [email protected] Copyright © 2012


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


• JavaScript: The Problem• TypeScript: The Solution• Types• Interfaces• Classes• Modules• Before/After Example

Agenda


JavaScript: The Problem


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)


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


Values are … What?! (1 of 2)

false.toString();

[1,2,3].toString();

"2".toString();

2.toString();

02.toString();

2 .toString();


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;


Case Sensitive? At least tell me!

var myObj = { foo : 1, Bar: 2 };var result = myObj.foo + myObj.bar;typeof result;result;


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);


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); };


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);}


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'));})();


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


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

https://github.com/borisyankov/DefinitelyTyped

https://github.com/borisyankov/DefinitelyTyped

http://www.typescriptlang.org/


TypeScript: Types• Any• Number• Boolean• String• Null• Undefined• Object• Void• HTMLElement• Call Signatures• Casting• Types don't exist at runtime


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


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


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


TypeScript: Before and After

wintellect.com

Questions?


Jeremy Likness (@JeremyLikness)Principal [email protected]

Introduction to TypeScript

Technology

Transcript of Introduction to TypeScript