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