Introduction to TypeScript

Introduction to TypeScript

Jeremy Likness (@JeremyLikness)
Principal Consultant
jlikness@wintellect.com
Copyright © 2012

consulting training design debugging wintellect.com

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


Agenda

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


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


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


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


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)


demo
TypeScript: Event Aggregator


demo
TypeScript: Before and After


Questions?

Jeremy Likness (@JeremyLikness)
Principal Consultant
jlikness@wintellect.com


Introduction to TypeScript

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (10)

Similaire à Introduction to TypeScript

Similaire à Introduction to TypeScript (20)

Dernier

Dernier (20)

Introduction to TypeScript

Notes de l'éditeur