TypeScript Language - Tuong-Nguyen/Angular-D3-Cometd GitHub Wiki

Variable declaration

let

• Must be defined before used.
• Block-scoped

const

Type annotation and inference

// type inference: number
var num = 2;

// a is "any" type
var a; 

// type annotation: number
var num: number = 2;

// type annotation: boolean
var boolvar: boolean = true;

// type annotation: string
var message: string = 'Hello';

// init is a function type which accept 1 string parameter and return void.
var init: (s: string) => void;

// POJO - duck typing: type { id: number, name: string }
var obj = { id: 10, name: 'Google'};

• Ambient declaration

// reference to external library
/// <reference path="jquery.d.ts" />

// declare a variable which is defined in external library
declare var $;

$("div").text("john");

Enum

enum DoorState = {
    Open,
    Closed
}

DoorState.Open // return 0
DoorState[0] // return Open
DoorState["Open"] // return 0

Union

var StringOrNumber = string | number;

var age: StringOrNumber ;
age = 'Hello';
age = 10;

// Type guard
if (typeof age === "number") {
    var test = age * 10; 
}

Function

• Signature: function add(a: number, b: number) => number

• name
• number of parameters
• type of parameters
• return value

• Optional parameter: function add(a: number, b?: number) => number

• last parameter.
• Value is undefined if it is not input.

• Default value parameter: function add(a: number, b: number = 0) => number

• Rest parameter: function add(a: number, ...argArray: number[]) => number

Class

class Car {  // class
   _engine: String; // field

   constructor(engine: Engine){  // constructor
      this.engine = engine;
   }
   
   // function
   start() {
      return "Started " + this._engine;
   }

   // Property
   get engine(): string {
      return this._engine;
   }

   set engine(value: string) {
      if(value == undefined) throw "Supply an Engine!";
      this._engine = value;
   }
}

Inheritance:

• single inheritance

Abstract class: abstract method

Interface

Module

Export

External module is the preferred way for defining module (namespace or internal module is not recommended by ES6)

   class Rectangle {
       constructor(public height: number, public width: number) {
       }
   }

   export { Rectangle as RectangleShape };
}

var rect = new Shapes.Rectangle(2, 4);

• Export Rectangle class with new name RetangleShape.

Reference a module

import { RectangleShape as Rect } from "./shapes.ts";
let rect = new Rect(2, 4);

import * as Shapes from "./shapes.ts";
let rect = new Shapes.Rect(2, 4);

Note: javascript must be included in correct order for running.

Default export

When there is only 1 item for exporting, we can use default export. When importing it, we can specify whatever name we like.

   // Export
   export default class Rectangle {
       constructor(public height: number, public width: number) {
       }
   }

   // Import
   import Rect from "./Shapes.ts";

Module loader

Typescript can be compiled to use different module loader

• CommonJS - node
• AMD - using Require.js (browser)
• UMD

Generic

class FootballGame<T implement IFootbalClub> {
}

Decorator: function

• Class

function decorator(constructor: Function)

• Parameter: Class prototype
• Called when class is created.

• Property

function decorator(target:any, propertyKey: string)

• Parameter: Class prototype and property name

• Method

function decorator(target:any, methodName: string, methodDescription: any)

• Parameter: Class prototype, method name, method description

• Parameter

function decorator(target:any, methodName: string, parameterIndex: number)

• Parameter: Class prototype, method name, parameter index.