5. JavaScript
• Developed in 10 days back in 1995
• Target: Easy script interaction for hobby
programmers in the browser, who can’t write
Java
• 1996 handed over to ECMA for standardization
• ECMAScript 5 (spec. 1999) supported by all
browsers (>=IE9)
7. JavaScript - In the enterprise?
• Not typesafe
• No objects/classes
• Hard to test
• Bad Async handling
8. TypeScript to the rescue
• Released 2012 by Microsoft
• Developed by Anders Hejlsberg (C#, Delphi)
• Compiles to JavaScript (configurable version)
• Full OOP
• Type-safe
• JavaScript compatible
10. Buzzword bingo
Types
var / let / const
Inheritance
Promises
Generics
Fat arrow
Interfaces
Decorators
public / private
Moduls
Class
11. Typing
var foo: string = 'bar';
var bar: any = ['lorem', 2];
function (p: Person) {
console.log(p.lastName);
}
function getAddress(): Address {
return this.address;
}
function getCountAndObject(): [number, any] {
return [this.addresses.length, this.addresses];
}
12. Types
// Primitives
var foo: string = 'bar';
var bar: any = ['lorem', 2];
// Arrays
var listOfSomething: number[] = [1,2,3];
var listOfSomething: Array<number> = [1,2,3];
// Tuples
var tuple: [string, number] = ['Hello', 5];
// Enum
enum Color {Red, Green, Blue};
var c: Color = Color.Green;
// Casting
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// Literals
type Easing = "ease-in" | "ease-out" | "ease-in-out";
13. Destructuring
let [first, second] = [1, 2];
// swap variables
[first, second] = [second, first];
// destructure arrays
let [first, ...rest] = [1, 2, 3, 4];
let [, second, , fourth] = [1, 2, 3, 4];
// objects
let o = {
a: "foo",
b: 12,
c: "bar"
}
let {a, b} = o;
14. Usage
npm install -g typescript
tsc hello.ts
class Student {
fullName: string;
constructor(public firstName, public
middleInitial, public lastName) {
this.fullName = firstName + " " +
middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " +
person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
var Student = (function () {
function Student(firstName, middleInitial,
lastName) {
this.firstName = firstName;
this.middleInitial = middleInitial;
this.lastName = lastName;
this.fullName = firstName + " " +
middleInitial + " " + lastName;
}
return Student;
}());
function greeter(person) {
return "Hello, " + person.firstName + " " +
person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
17. Variable scoping
var foo: string = 'bar';
let foo: string = 'bar';
const foo: string = 'bar';
var let const
scope function block block
immutable No No Yes
Standard ever ES2015 / TS ES2015 / TS
Usecase Not any more ~30% ~70%
23. Classes
interface ClockConstructor {
new (hour: number, minute: number): ClockInterface;
}
interface ClockInterface {
tick();
}
function createClock(ctor: ClockConstructor, hour: number, minute: number):
ClockInterface {
return new ctor(hour, minute);
}
class DigitalClock implements ClockInterface {
constructor(h: number, m: number) { }
tick() {
console.log("beep beep");
}
}
class AnalogClock implements ClockInterface {
constructor(h: number, m: number) { }
tick() {
console.log("tick tock");
}
}
let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);
24. Classes property visibility
class Person {
protected name: string;
constructor(name: string) { this.name = name; }
}
class Employee extends Person {
private department: string;
constructor(name: string, department: string) {
super(name);
this.department = department;
}
public getElevatorPitch() {
return `Hello, my name is ${this.name} and I work in $
{this.department}.`;
}
}
let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());
console.log(howard.name); // error
25. Interfaces extending Classes
class Control {
private state: any;
}
interface SelectableControl extends Control {
select(): void;
}
class Button extends Control {
select() { }
}
class TextBox extends Control {
select() { }
}
class Image extends Control {
}
class Location {
select() { }
}
26. Solving the "this" problem
$('#any-button').on('click', function() {
$(this).text('Clicked');
$.get('http://some.api/foo.json').success(function(){
$(this).text('Result');
});
}
$('#any-button').on('click', function() {
$(this).text('Clicked');
var btn = this;
$.get('http://some.api/foo.json').success(function(){
$(btn).text('Result');
});
}
29. Generics
class Cake {…}
class Phone {…}
class Box {…}
function box <T> (content: T): Box<T> {
const myBox = new Box<T>(content);
return myBox;
}
box<Cake>(new Cake()) // a box with a cake
box<Phone>(new Phone()) // a box with a phone
box(new Cake()) // also a box with a cake => inference
30. Iterables
let list = [4, 5, 6];
for (let i in list) {
console.log(i); // "0", "1", "2",
}
for (let i of list) {
console.log(i); // "4", "5", "6"
}
31. Modules
• Scoping of variables (out of global)
• Code re-use
• Lazy/Async loadable
• Encapsulation
• DRY
• Ease of testing
35. JavaScript integration
• Already loaded JS libs are ambient modules
• Typedefinition files [library].d.ts provide typed
interfaces for TypeScript
• Typings is a Definition Manager that loads,
updates and maintains definition files
https://github.com/Microsoft/TypeScriptSamples/tree/master/jquery
