
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 = (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