Angular – Typescript

Table of Contents

Source

Typescript

Variables Declaration

				
					var number = 1;
let count = 2;
				
			
				
					// Compliation error with 'let'
function doSomething() {
    for (let i = 0; i < 5; i++) {
        console.log(i);
    }
    console.log('Finally: ' + i);
}

// let is defined for the nearest block
				
			
				
					// No error with 'var'
function doSomething() {
    for (var i = 0; i < 5; i++) {
        console.log(i);
    }
    console.log('Finally: ' + i);
}
// var is defined for the nearest function
				
			

Types

				
					let a: number;
let b: boolean;
let c: string;
let d: any;
let e: number[] = [1, 2, 3];
let f: any[] = [1, true, '1'];
				
			

Enum

				
					// enum
enum Color {Red = 1, Green = 2, Blue = 3};
let backgroundColor = Color.Red;
// with variables
const ColorRed = 0;
const ColorGreen = 1;
const ColorBlue = 2;
				
			

Type Assertions

				
					// type-assertions
let message: string;
let endWithC = (<string>message).endsWith('c');
let alternativeWay = (message as string).endsWith('c');

				
			

Arrow Function

				
					/* Function */
let log = function(message) {
    console.log(message);
}
/* Arrow Function */
let doLogOneLine = (message) => console.log(message);

let doLog = (message) => {
    console.log(message);
}
				
			

Interfaces

				
					// Interfaces = Costum Types
interface Point {
    x: number,
    y: number
}

let drawPoint = (point: Point) => {
    // ..
}

drawPoint({
    x: 1,
    y: 2
})
				
			

Classes

				
					//   Class
//   Group variables(properties) and functions(methods) that are highly related
class Point {
    x: number,
    y: number

    draw() {
        // ..
    }

    getDistance(another: Point) {
        // ..
    }
}
				
			

Objects

				
					// Object
class Point {
    x: number;
    y: number;

    draw() {
        console.log('X: ' + this.x + ', Y: ' + this.y);
    }

    getDistance(another: Point) {
        // ..
    }
}

let point = new Point(); // This is the Object
point.x = 1;
point.y = 2
point.draw();
				
			

Constructor

				
					// Constructor
class Point {
    x: number;
    y: number;

    constructor(x?: number, y?: number) {
        this.x = x;
        this.y = y;
    }

    draw() {
        console.log('X: ' + this.x + ', Y: ' + this.y);
    }

}

let point = new Point();
point.draw();
				
			

Access Modifiers

				
					// public (default) 
// private
// protected

class Point {
    private x: number;
    private y: number;

    constructor(x?: number, y?: number) {
        this.x = x;
        this.y = y;
    }

    draw() {
        console.log('X: ' + this.x + ', Y: ' + this.y);
    }

}

let point = new Point(1, 2);
// point.x = 3; // Will not work when private!
point.draw();
				
			

Constructor Parameters

				
					class Point {
    constructor(private x?: number, private y?: number) {
    }

    draw() {
        console.log('X: ' + this.x + ', Y: ' + this.y);
    }
}

let point = new Point(1, 2);
point.draw();
				
			

Properties

				
					class Point {
    constructor(private _x?: number, private _y?: number) {
    }

    draw() {
        console.log('X: ' + this._x + ', Y: ' + this._y);
    }

    get x() {
        return this._x;
    }

    set x(value) {
        if (value < 0) {
            throw new Error('value cannot be less then 0.');
            this._x = value;
        }
    }
}

let point = new Point(1, 2);
let x = point.x = 12;
x = 4;
point.draw();
				
			

Modules

				
					

// main.js
import { Point } from  './point';

let point = new Point(1, 2);
point.draw();


// point.ts
export class Point {
    constructor(private x?: number, private y?: number) {
    }

    draw() {
        console.log('X: ' + this.x + ', Y: ' + this.y);
    }
}
				
			

Knowledge Check

				
					// main.ts
import { LikeComponent } from './like.component';

let component = new LikeComponent(10, true);
component.onClick();
console.log(`likesCount: ${component.likesCount}, isSelected: ${component.isSelected}`);

// like.component.ts
export class LikeComponent {
    constructor(private _likesCount: number, private _isSelected: boolean) {
    }

    onClick() {
        this._likesCount += (this._isSelected) ? -1 : +1;
        this._isSelected = !this._isSelected;
    }

    get likesCount() {
        return this._likesCount;
    }

    get isSelected() {
        return this._isSelected;
    }
}


				
			

Thats it have fun