Typescript

TypeScript is a typed superset of Javascript that compiles to plain Javascript.

What do you get?

• Strongly typed variables
• Interfaces
• Classes

Why does this matter?

Find out about errors at compile time

rather than runtime

Quick Overview of TypeScript

Typescript is Javascript

function greeter(person) {
  return "Hello, " + person;
}

var user = "Jane User";

document.body.innerHTML = greeter(user);
            

Strong type parameter

function greeter(person: string) {
  return "Hello, " + person;
}

var user = {
  "id": 1,
  "name": "Jane User",
};

document.body.innerHTML = greeter(user);
            

Compile time error!

Define an interface

interface Person {
  id: number;
  name: string;
}

function greeter(person: Person) {
  return "Hello, " + person.name;
}

var user = {
  "id": 1,
  "name": "Jane User",
};

document.body.innerHTML = greeter(user);
            

Classes

interface Person {
  id: number;
  name: string;
  greeter(name: string): void;
}

class Man implements Person {
  constructor(public id, public name) {
    this.id = id;
    this.name = name;
  }

  greeter() {
    return "Hello, " + this.name;
  }
}

var user = new Man(1, 'Jake Speed');

document.body.innerHTML = user.greeter();
            

Questions about TypeScript?

Angular Architecture

Component Based Architecture

A component is the combination of an HTML template and a component class that controls a portion of the screen.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
Hello {{name}}
`
})

export class AppComponent {
  name = 'Angular';
}
            

Let's create this app.

Angular CLI

3 steps to try Angular

1. Install the CLI tool

   
     npm install -g angular-cli
                   

2. Create the project

   
     ng new my-app
                   

3. Serve the app

   
     cd my-app
     ng serve
                   

Demo

(Angular CLI)

Tour of Heroes

Who has gone through the Tour of Heroes?

Lets disect the app together