Classes in TypeScript

TypeScript classes build on top of JavaScript’s (ES2015) class functionality. You get everything ES2015 offers, plus a stack of TypeScript-specific features. The most obvious addition: types for class members and member functions.

Here’s an example showing types applied to a class:

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }

  introduce(): void {
    console.log(`Hello, I am ${this.name}!`);
  }
}

const person = new Person('Adam');
person.introduce(); // Hello, I am Adam!

Sharp-eyed readers will have spotted another difference from a plain ES2015 class. You need to declare a member before you can assign values to it with this. That’s why name appears on the first line of the class definition.

Inheritance

Inheritance works the same way. Use extends to create a child class and super to call a method from the parent:

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }

  introduce(): void {
    console.log(`Hello, I am ${this.name}!`);
  }
}

class SuperHero extends Person {
  constructor(name: string) {
    super(name);
  }

  introduce(): void {
    console.log('Ssshhh, I am a superhero ...');
    super.introduce();
  }
}

const batman = new SuperHero('Burce');
batman.introduce();
// Ssshhh, I am a superhero ...
// Hello, I am Burce!

So far, nothing dramatically different from ES2015. But TypeScript lets us add modifiers to class members.

Public, private and protected

Other object-oriented languages support encapsulation through member modifiers: public (accessible by any class), private (accessible only within the class that created it), and protected (accessible by the current class and any subclass derived from it).

public

If you don’t specify a modifier in TypeScript, public is assumed. These two declarations are effectively identical:

class Person {
  public name: string;
}

class Person {
  name: string;
}

private

Mark a member as private and only the class that owns it can touch it:

class Person {
  public name: string;
  private dob: string;
  constructor(name: string, dob: string) {
    this.name = name;
    this.dob = dob;
  }
}

const dave = new Person('Dave', '01/12/1973');
console.log(dave.name); // Dave
console.log(dave.dob); // Property 'dob' is private and only accessible within class 'Person'.

protected

protected is slightly different. You still can’t access the property from outside the class, but you can reach it from any class that extends it:

class Person {
  public name: string;
  protected dob: string;
  constructor(name: string, dob: string) {
    this.name = name;
    this.dob = dob;
  }
}

class SuperHero extends Person {
  constructor(name: string, dob: string) {
    super(name, dob);
  }
}

const spiderman = new SuperHero('Peter', '10/22/1984');
console.log(spiderman.name); // Peter
console.log(spiderman.dob); // Property 'dob' is protected and only accessible within class 'Person' and its subclasses.

You can also apply protected to constructors, so that a constructor can only be called when extending a class.