Classes

• Since ES6 we can create classes and extend from them
• In TS we can also create classes:

class Point {
    x: number;
    y: number;
    constructor(x: number, y: number) {
        this.x = x;
        this.y = y;
    }
    add(point: Point) {
        return new Point(this.x + point.x, this.y + point.y);
    }
}

let p1 = new Point(0, 10);
let p2 = new Point(10, 20);
let p3 = p1.add(p2); // {x:10,y:30}

• Play around with the target version of the compiler to see what happens

Angular!

TypeScript classes play an important role in Angular. Almost every concept in the Angular framework is a class. Better get used working with them!😉

Inheritance

• Classes in TS support single inheritance using the extends keyword:

class Point3D extends Point {
    z: number;
    constructor(x: number, y: number, z: number) {
        super(x, y);
        this.z = z;
    }
    add(point: Point3D) {
        let point2D = super.add(point);
        return new Point3D(point2D.x, point2D.y, this.z + point.z);
    }
}

• If the parent class has a constructor you have to call it from the child class = super(x, y);

Statics

• Static members are members that are shared by all instances of a class
• You can have static members and static functions

class Something {
    static instances = 0;
    constructor() {
        Something.instances++;
    }
}

let s1 = new Something();
let s2 = new Something();
console.log(Something.instances); // 2

Access Modifiers

• public, private and protected are the access modifiers supported by TS
• If an access modifier is not specified it is implicitly public

  accessible on	public	private	protected
  class	yes	yes	yes
  class children	yes	no	yes
  class instances	yes	no	no

class FooBase {
    public x: number;
    private y: number;
    protected z: number;
}

// EFFECT ON INSTANCES
let foo = new FooBase();
foo.x; // okay
foo.y; // ERROR : private
foo.z; // ERROR : protected

// EFFECT ON CHILD CLASSES
class FooChild extends FooBase {
    constructor() {
      super();
        this.x; // okay
        this.y; // ERROR: private
        this.z; // okay
    }
}

Abstract

• abstract classes are classes that cannot be instantiated
• Instead you must create a class that inherits from the abstract class

abstract class FooCommand {}

class BarCommand extends FooCommand {}

const fooCommand: FooCommand = new FooCommand(); // Cannot create an instance of an abstract class.

const barCommand = new BarCommand(); // You can create an instance of a class that inherits from an abstract class.

• Having an abstract modifier on a class means that the child class must provide the functionality

abstract class FooCommand {
  abstract execute(): string;
}

class BarErrorCommand  extends FooCommand {} // 'BarErrorCommand' needs implement abstract member 'execute'.

class BarCommand extends FooCommand {
  execute() {
    return `Command Bar executed`;
  }
}

const barCommand = new BarCommand();

barCommand.execute(); // Command Bar executed