TypeScript

Basic Types: boolean and number

• boolean:
• let isMonday: boolean = true; //default is false
• number:
• let thousand = 1000; //decimal
• let ninehundred = 0x384; // hex
• let sixty = 0o74; // octal
• let seven = 0b111; // binary
• let year = thousand + ninehundred + sixty + seven;
• alert(year);

Basic Types: string and Template strings

• string:
• let car: string = "ford";
• car = "citroen";
• Template strings:
• span multiple lines
• surrounded by backquote characters `
• can embed exressions into it
• let car: string = "Veyron Super Sport";
• let speed: number = 268;
• let phrase = `${car} is recognized as the world’s fastest production car by Guinness.
• It's top speed is ${speed} mph.
• Would you like to drive it?`;
• alert(phrase);

Basic Types: Arrays and Tuples

• Arrays:
• let languages: string[] = ["english", "german", "french", "italian", "spanish"];
• let squares: Array<number> = [0, 1, 4, 9, 16, 25, 36, 49];
• Tuples:
• let z : [number, string];
• z = [1, "Apple"];
• alert(z[0]); // 1
• alert(z[1]); // Apple
• z[2] = "Pear";z[3] = 2;
• z[4] = true; // Compiler error

Basic Types: enums and any

• enums:
• enum make { Audi, AlphaRomeo, BMW, Citroen, Ford, Holden, Hyundai, Jaguar, Kia };
• let myCarMake = make.Ford;
• alert(myCarMake);
• any:
• let age: any = "five";age = 5;

Basic Types: void, null, undefined, never

• void:
• no type at all
• used in functions that do not return value
• if variable is declared of type void, can only assign null or undefined
• null and undefined:
• they are subtypes of all other types
• if --strictNullChecks is on, can only assign null and undefined to void
• never:
• type that never occurs
• return type of the function that never returns (unreachable end point)

Basic Types: Type Assertions

• Type Assertions:
• let someonesName: any = "John";
• // Angle Bracket syntax
• let nameLength: number = (<string> someonesName).length;
• //"as" syntax
• let nameLength2: number = (someonesName as string).length;

Variable Declarations

• var a = 25;
• let b: string = "1 May";
• const christmasDay: string = "25 December";
• Array destructuring:
• let languages: string[] = ["english", "german", "french", "italian", "spanish"];
• let [english, german, french, italian, spanish] = languages;
• let [main, ... others] = languages;

Variable Declarations

• Object destructuring:
• let myCar = { make: "Ford",
• model: "Falcon",
• variant: "XR6",
• year: 2007
• }
• let { make, model } = myCar;

Interfaces

• not as strict as in c#
• structural subtyping
• object has to have all the same properties as interface
• does not have to be derived or created as the same interface

Interfaces

• interface Car {
• make: string;
• model: string;
• }
• interface CarExtended {
• make: string;
• model: string;
• variant?: string;
• readonly year: number;
• }
• interface CarShort {
• make: string;
• }
• function getCarMake(theCar: Car): string
• {
• return theCar.make;
• }
• let myCar1: Car = { make: "Ford", model: "Falcon" };
• let myCarMake1 = getCarMake(myCar1); //OK
• let myCar2: CarExtended = { make: "Ford", model: "Falcon", year: 2007 };
• let myCarMake2 = getCarMake(myCar2); //OK
• let myCar3 = { make: "Ford", model: "Falcon", year: 2007 };
• let myCarMake3 = getCarMake(myCar3); //OK
• let myCar4: CarShort = { make: "Ford" };
• let myCarMake4 = getCarMake(myCar4); //Error

Function Types

• interface Car {
• make: string;
• model: string;
• }
• interface GetMake {
• (car: Car): string;
• }
• let myGetMakeFunction: GetMake;
• myGetMakeFunction = function getCarMake(theCar: Car): string {
• return theCar.make;
• };
• let myCar1: Car = { make: "Ford", model: "Falcon" };
• let myCarMake1 = myGetMakeFunction(myCar1);

Function Types

• let myGetMakeFunctionV2: GetMake;
• myGetMakeFunctionV2 = function getCarMake(theCar: { make: string, model: string } ): string {
• return theCar.make;
• };
• let myCarMake2 = myGetMakeFunctionV2(myCar1);

Indexable Types

• interface Car {
• make: string;
• model: string;
• }
• interface CarMap {
• [index: number]: Car;
• }
• let firstCar: Car = { make: "Ford", model: "Falcon" };
• let secondCar: Car = { make: "Holden", model: "Commodore" };
• let map: CarMap = [firstCar, secondCar];
• let car1 = map[0];
• alert(car1.model);
• let car2 = map[1];
• alert(car2.model);

Extending Interfaces

• interface Shape {
• color: string;
• name: string;
• }
• interface Polygon extends Shape {
• sides: number;
• }
• let triangle: Polygon = { color: "red", name: "triangle", sides: 3 };
• let rectangle = {} as Polygon;
• rectangle.sides = 4;
• rectangle.name = "rectangle";
• let circle: Shape = { color: "black" };
• let triangleShape = triangle as Shape;
• alert(triangleShape.color);

Classes

• class Shape {
• color: string;
• constructor(color: string) {
• this.color = color;
• }
• }
• let circle = new Shape("red");
• alert(circle.getColor());

Classes, implementing interface

• interface ICar {
• make: string;
• model: string;
• }
• class Car implements ICar {
• make: string;
• model: string;
• constructor(make: string, model: string) {
• this.make = make;
• this.model = model;
• }
• }

Class Inheritance

• Extend Shape Class:
• class Polygon extends Shape { sides: number;
• constructor(color: string, sides: number) {
• let polygonName: string;
• switch (sides) {
• case 3:
• polygonName = "triangle";
• break;
• case 4:
• polygonName = "rectangle";
• break;
• case 5:
• polygonName = "pentagon";
• break;
• default:
• polygonName = `${sides} sided polygon`;
• }
• super(color, polygonName);
• this.sides = sides;
• }
• }
• let threeSidedPolygon = new Polygon("red", 3);
• alert(threeSidedPolygon.name);

Class modifiers

• public name: string;
• private dateOfBirth: Date;
• protected name: string;
• readonly name: string;

Class Accessors

• class Shape {
• private _color: string;
• name: string;
• constructor(color: string, name: string) {
• this._color = color;
• this.name = name;
• }
• get color(): string {
• return this._color;
• }
• set color(newColor: string) {
• this._color = newColor;
• }
• }
• let circle = new Shape("red", "circle");
• alert(circle.color);

Abstract classes

• abstract class Shape {
• abstract getColor(): string;
• color: string;
• }

Functions

• function multiply(x: number, y: number) :number {
• return x * y;
• }
• // Anonymous function
• let times = function (x: number, y: number): number
• { return x * y; };
• let times2: (x: number, y: number)=>number =
• function(x: number, z: number): number { return x * z; };
• function multiply3(x: number, y: number, z?: number): number {
• if (z !== null && z !== undefined)
• {
• return x * y * z;
• }
• else
• {
• return x * y;
• }
• }
• function multiply4(x: number, y: number, z: number = 1): number {
• return x * y * z;
• }

Functions

• function multiply(a: number, b: number, ...xyz: number[])
• {
• let product = a * b;
• for (let c of xyz) {
• product = product * c;
• }
• return product;
• }

Functions: this keyword

• let multiplier = {
• x: 1,
• y: 1,
• times: function() {
• return function() {
• return this.x * this.y;
• }
• }
• }
• let times2 = multiplier.times();
• let product = times2();
• alert(product);

Generic Functions:

• interface SwopFn<T> {
• ( x: T, y: T ): {x:T, y:T};
• }
• function Swop<T>(x: T, y: T): { x: T, y: T } {
• let temp: T = x;
• x = y;
• y = temp;
• return {x, y};
• }
• let mySwopFn : SwopFn<number> = Swop;
• let swoppedValues = mySwopFn(1, 2);
• alert(swoppedValues.x + " - " + swoppedValues.y);
• interface Shape {
• color: string;
• name: string;
• }
• interface SwopFn<T extends Shape> {
• ( x: T, y: T ): {x:T, y:T};
• }
• function Swop<T>(x: T, y: T): { x: T, y: T } {
• let temp: T = x;
• x = y;
• y = temp;
• return {x, y};
• }
• let circle: Shape = { color: "red", name: "circle" };
• let square: Shape = { color: "green", name: "square" };
• let mySwopFn : SwopFn<Shape> = Swop;
• let swoppedValues = mySwopFn(circle, square);
• alert(swoppedValues.x.name + " - " + swoppedValues.y.name);

Generic Classes

• interface Shape {
• color: string;
• name: string;
• }
• class GenericSwapper<T>{
• x: T;
• y: T;
• swop(): void {
• let temp: T = this.x;
• this.x = this.y;
• this.y = temp;
• }
• }
• let circle: Shape = { color: "red", name: "circle" };
• let square: Shape = { color: "green", name: "square" };
• let mySwopper = new GenericSwapper<Shape>();
• mySwopper.x = circle;
• mySwopper.y = square;
• alert(mySwopper.x.name + " - " + mySwopper.y.name);
• mySwopper.swop();
• alert(mySwopper.x.name + " - " + mySwopper.y.name);
• mySwopper.swop();
• alert(mySwopper.x.name + " - " + mySwopper.y.name);

Intersection and Union Types

• Intersection: T & U
• Union: T | U

Iterators:

• let someArray = ["Ford", "Holden", "Toyota"];
• //Iterate values
• for (let entry of someArray) {
• alert(entry); // "Ford", "Holden", "Toyota"
• }
• //Iterate keys
• for (let entry in someArray) {
• alert(entry); // "0", "1", "2"
• }