classes in TypeScript

testYourselfTypeScript TypeScript1662 10 0

TypeScript offers full support for the class keyword introduced in ES2015.

As with other JavaScript functions, TypeScript adds type annotations and other syntax to allow you to express relationships between classes and other types.

The access modifiers that are available in TypeScript classes are:

  • private - it can be accessed only from inside of its containing class
  • protected - it can be accessed within containing class and deriving classes
  • public - it can be accessed from outside of its containing class

In TypeScript, each member is public by default no matter if it is a property, a method or a constructor.

public

public member can be accessed by anywhere:

class Vehicle {
  public wheels = 4;
}

const car = new Vehicle();
console.log(car.wheels); // 4

private

Properties and methods with private access modifier can be accessed only from inside of its containing class

class Vehicle {
  private wheels = 4;
}

const car = new Vehicle();
console.log(car.wheels); // Property 'wheels' is private and only accessible within class 'Vehicle'.

protected

The protected modifier acts much like the private modifier with the exception that members declared protected can also be accessed within its subclasses.

class Parent {
  protected x = 11;
}

class Child extends Parent {
  get() {
    return this.x;
  }
}

const child = new Child();
console.log(child.get()); // 11

It cannot be accessed from outside of its containing class.

const parent = new Parent();
console.log(parent.x); // Property 'x' is protected and only accessible within class 'Parent' and its subclasses.

A constructor may also be marked protected. This means that the class cannot be instantiated outside of its containing class, but can be extended.

class Employee {
  public name;

  protected constructor(name) {
    this.name = name;
  }
}

var employee = new Employee("John"); // Constructor of class 'Employee' is protected and only accessible within the class declaration.

readonly

Some properties should only be modifiable when an instance of a class is first created. You can specify this by putting readonly before the name of the property.

class Person {
  readonly age: number;
  constructor(age: number) {
    this.age = age;
  }
}

const kid = new Person(10);
kid.age = 20; // Cannot assign to 'age' because it is a read-only property

static

Static members of a class are visible on the class itself rather than on the instances.

class Developer {
  static id = 10;
  get() {
    return Developer.id;
  }
}
const developer = new Developer();
console.log(developer.get()); // 10
console.log(Developer.id); // 10
​​​​​​​console.log(developer.get() === Developer.id); // true

abstract

Abstract classes are base classes from which other classes may be derived. They can contain implementation details for its members but they may not be instantiated directly.

abstract class Vehicle {
  abstract wheels: number;
}
class Car extends Vehicle {
  wheels = 4;   
}

if we try to initialize it, TypeScript will warn us that this is not allowed.

new bus = new Vehicle(); // Cannot create an instance of an abstract class.​​​​​

Interface

One of the most common uses of interfaces is enforcing that a class meets a particular contract. In TypeScript it is accomplished by using the implements keyword.

 class Person implements IPerson {}