-
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
false.toString();[1,2,3].toString();"2".toString();2.toString(); 02.toString();2 .toString();
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;
varmyObj = { foo : 1, Bar: 2 };var result = myObj.foo + myObj.bar;typeof result;result;
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);
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); };
for (var x = 0; x < 5; x++) { console.log(x); }for (var x = 0; x < 5; ++x) { console.log(x);}
(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'));})();
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; }
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 {}
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);}
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);