Sometimes

you just want to make a button

“

”

Me at Reboot the Commute

But JavaScript has a tendency to turn into

If JavaScript were a weapon...

Source: http://bjorn.tipling.com/if-programming-languages-were-weapons

javascript - accessing private member variables from prototype-defined functions

So what is TypeScript?

• Typescript is a superset of JavaScript
• Open-sourced
• Developed by Microsoft
• Angular2 is written in TypeScript

$ npm install -g typescript

You just need npm to install TypeScript

$ tsc file.ts

file.ts

file.js

Types

Type Annotations

var name: string =  "Typescript";
var size: number = 42;
var isOn: boolean = true;

var none: void = null;
var all: any; /* default */

Primitive values

Type Annotations

Arrays & Objects

var values: number[] =  [1, 2, 3];
var person: { name: string } = { name: "Bob" };

Type Annotations

function isEven(x: number): boolean {
    return x % 2 === 0;
}

Functions

Type Aliases

type double = number;
type char = string;

var amount: double = 42.00;
var letter: char = 'A';

Define your own types

Union Types

function average (x: number | number[]) {
  if (typeof x === 'number') {
    return x;
  } else {
    let sum = x.reduce( (prev, curr) => prev + curr; );
    return sum / x.length;
  }
}

Declaring multiple types

Interfaces

Collections of values

function greet (person: { name: string }) {
  console.log('Hello, ' + person.name + '!');
}

Optional properties

interface SquareConfig {
  color?: string;
  width?: number;
}

Function Types

interface SearchFunc {
  (source: string, subString: string): boolean;
}

Classes

OO(OOOOOOO)P

class Animal {
    name:string;
    constructor(theName: string) { this.name = theName; }
    move(meters: number = 0) {
        alert(this.name + " moved " + meters + "m.");
    }
}

Implementing 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) {
        // ...
    }
}

• You can enforce that a class has specific properties and methods

Access Modifiers

class Animal {
    private _name: string;
    constructor(theName: string) {
      this._name = theName;
    }

    move(meters: number) {
        alert(this._name + " moved " + meters + "m.");
    }
}

• Access modifiers are only enforced at compile time.
• Public by default

/[GS]etters/

class Person {
  constructor (private _firstName: string, private _lastName: string) {
    // ...
  }

  get fullName () {
    return this._firstName + " " + this._lastName;
  }
	
  set firstName (newName) {
    this._firstName = newName[0].toUpperCase() + newName.slice(1).toLowerCase(); 
  }
}

• Uses ES5 Object.defineProperty