Javascript
ES2015
Typescript
Javascript
No runtime required
//ES6
class Shape {
constructor (id, x, y) {
this.id = id
this.move(x, y)
}
move (x, y) {
this.x = x
this.y = y
}
}
//ES5
var Shape = function (id, x, y) {
this.id = id;
this.move(x, y);
};
Shape.prototype.move = function (x, y) {
this.x = x;
this.y = y;
};
//ES6
for (let i = 0; i < a.length; i++) {
let x = a[i];
…
}
for (let i = 0; i < b.length; i++) {
let y = b[i];
…
}
//ES5
var i, x, y;
for (i = 0; i < a.length; i++) {
x = a[i];
…
}
for (i = 0; i < b.length; i++) {
y = b[i];
…
}
//ES6
class Rectangle extends Shape {
constructor (id, x, y, width, height) {
super(id, x, y)
this.width = width
this.height = height
}
}
//ES5
var Rectangle = function (id, x, y, width, height) {
Shape.call(this, id, x, y);
this.width = width;
this.height = height;
};
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
Class/Function Shape has been omitted for brevity
// ES6
this.nums.forEach((v) => {
if (v % 5 === 0)
this.fives.push(v);
});
//ES5
this.nums.forEach(function (v) {
if (v % 5 === 0)
this.fives.push(v);
}.bind(this));
this.nums.forEach(function (v) {
if (v % 5 === 0)
this.fives.push(v);
}, this);
//ES6
// lib/math.js
export function sum (x, y) { return x + y }
export var pi = 3.141593
// someApp.js
import * as math from "lib/math"
console.log("2π = " + math.sum(math.pi, math.pi))
//ES5
// lib/math.js
LibMath = {};
LibMath.sum = function (x, y) { return x + y };
LibMath.pi = 3.141593;
// someApp.js
var math = LibMath;
console.log("2π = " + math.sum(math.pi, math.pi));
Types
You screwed up !
// Javascript
...
var username = 'brucewayne@wayneenterprises.com';
username.toLowerCase().find('@');
...
// Typescript
...
let username: string = 'brucewayne@wayneenterprises.com';
username.toLowerCase().find('@');
...
Basic Types
var age = 5;
var name = true;
var address = 'neverland';
var numbers = [1,2,3,4];
var counting = [1,2,3,4];
var tuple = [1, 'batman'];
var various = [1, true, 'wayne', [false, 9]];
let age:number = 5;
let name: boolean = true;
let address: string = 'neverland';
let numbers: number [] = [1,2,3,4];
let counting: Array<number> = [1,2,3,4];
let tuple: [number, string] = [1, 'batman'];
let various: any[] = [1, true, 'wayne', [false, 9]];
Variable type annotations
Type annotations can also be inferred
// hero will be inferred as a type string
let hero = 'Bruce Wayne';
// zero will be inferred as a type any
let zero;
zero = 'Peter Parker';
Object types
// hero will be inferred as an object type
// with key: string, value: string
let hero = {
name: 'Bruce Wayne'
};
Function types
// Inferred as a type Function
// a, b and return type is any
let add = (a, b) => a + b;
// Type Function
// a, b and return type is number
let add: Function = (a: number, b: number) => a + b;
// Type Function
// a, b and return type is number
let add: Function = (a: number, b: number): number => a + b;
Interfaces
It's a code contract
You were asked to build this:
But built this:
Which is like coding this:
instead of this:
let person = {
fname: 'Bruce',
lname: 'Wayne'
}
let person = {
firstName: 'Bruce',
lastName: 'Wayne'
}
interface Person {
firstName: string;
lastName: string;
age?: number;
}
let person: Person {
firstName: 'Yahiko'
}
let person: Person {
firstName: 'Yahiko',
lastName: 'Nagashi'
}
age has a ? and is optional
class Trainer implements Person {
firstName: string;
lastName: string;
constructor(p: Person){
this.firstName = p.firstName;
this.lastName = p.lastName;
}
getUser(): Person {
return {
firstName: this.firstName,
lastName: this.lastName
}
}
}
As a class interface
As a type
Generics
Code stencils or templates
export class List<T> {
list: Array<T> = new Array<T>();
add(item: T) {
this.list.push(item);
}
}
let people = new List<string>();
people.add('Bruce');
people.add(211); //error
export class List<T> {
list: Array<T> = new Array<T>();
add(item: T) {
this.list.push(item);
}
}
interface Person {
firstName: string;
lastName: string;
}
let people = new List<Person>();
people.add({firstName: 'Bruce', lastName: 'banner'});
people.add(211); //error
Setup
Future today
Decorators are an integral part of Angular 2
Who is using Typescript?
Summary
Types
Interfaces
Generics
Future
Unmatchable tooling support
https://slides.com/mohuk/ts-10pearls
Thank you !
Questions ...
mohuk
mohukh