Intro to TypeScript

Problems with JS

• Dynamic typing
• Lack of modularity
• Verbose patterns to achieve some code sanity

ES6/ES2015

• Classes
• Arrow Functions
• Template Strings Inheritance
• Constants and Block Scoped Variables ...spread and ...rest
• Destructuring
• Modules

Classes

class Pizza {
    constructor(toppings) {
        this.toppings = toppings
    }

    listToppings() {
        toppings.forEach(function(topping) {
            console.log(topping.toString();
        }
    }
}

Classes

class Pizza {
    constructor(toppings) {
        this.toppings = toppings
    }

    listToppings() {
        this.toppings.forEach(function(topping) {
            console.log(topping.toString();
        }
    }
}

var pizza = new Pizza();
pizza.listToppings();

Arrow functions

var toppingPrice = toppings.map(function(topping) {
    return topping.name + " " + topping.price;
});

var toppingPrice = toppings.map(topping => topping.name + 
    " " + topping.price );

Template strings

console.log('hello my name is ' + name + ' I am ' + age );

console.log(`hello my name is ${name}, and I am ${age}`);

var element = `
    <div>
        <span>Some text</span>
    </div>
`;

Const and let

const a = 123;
a = 124; // Error

...
if(someCondition) {
    let someVar = 10;
    ...
}

someVar = 2 // not same as above

for(let i=0; i<10;i ++) {
    ... -> life of i
}

Spread rest and destructuring

let cde = ['c', 'd', 'e'];
let scale = ['a', 'b', ...cde, 'f', 'g'];

function add(...numbers) {
    return numbers[0] + numbers[1];
}

let foo = ['one', 'two', 'three'];
let [one, two, three] = foo;

let someObj = {a: "asd", b: "qwe"};
let {a, b} = someObj;

TypeScript

What TypeScript brings extra:

• static typing
• classes++
• interfaces
• generics
• decorators

Static typing

let isDone: boolean = false;
let height: number = 6;
let name: string = "bob";
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
enum Color {Red, Green, Blue};
let c: Color = Color.Green;
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

Classes ++

class Person {
    name: string;
    nickName?: string;
    
    constructor(name: string) {
        ...
    }
}

const p = new Person("Andrei");

Interfaces

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}

Generics

//declare
private _possessions: Array<Thing>;

constructor(){
    //assign
    this._possessions = new Array<Thing>();
}

Decorators

Functions that are invoked with a prefixed @ symbol, and immediately followed by a class , parameter, method or property.

@Component({
    selector: 'my-app',
    styles: [`
        h1 {color:#545454;}
    `] 
    template: `
    <h1>Hello from the {{componentName}}.</h1>
    `
})
export class AppComponent {
    componentName: 'AppComponent'
}

What's new to Angular 2

• New change detection mechanism
  • introducing zones
  • models as observables
  • extra: use immutables
• New module system - ngModule
  • es6 modules
  • easier lazy loading
  • drop bower in favour of npm for package management
• New DI mechanism
• Component based architecture (already in ng 1.5)
• Improved support for server side rendering - AOT compilation
• Support for web components

What's new to Angular 2

What do we need

Angular libraries:

• @angular/core
• @angular/compiler
• @angular/platform-browser
• @angular/platform-browser-dynamic
• @angular/common

• @angular/forms
• @angular/router
• @angular/http

What else

Polyfils and extra libraries:

• core-js
• zone.js
• RxJS

What else

Components in ng2

import { Component } from '@angular/core';
import { SomeService } from './services/SomeService';

@Component({
  selector: 'my-component',
  template: `
    <div>Hello my name is {{name}}. 
        <button (click)="sayMyName()">
            Say my name
        </button>
    </div>`
})
export class MyComponent {
  @Input() name
  constructor(private someService: SomeService) {
  }
  sayMyName() {
    console.log('My name is', this.name)
  }
}

Components in ng1

app.module('someModule')
    .component('my-component', {
        bindings: {
            name: '<',
            sayMyName: '&'
        },
        template: '<div>Hello my name is {{name}}. <button (click)="sayMyName()">Say my name</button></div>',
        controller: ComponentController
    })

class ComponentController {
    constructor(SomeService) {
        this.someService = SomeService;
    }

    sayMyName() {
       console.log('My name is', this.name)
    }
}

Component architecture

Dumb vs smart components