Theme:

Classes

TypeScript offers full support for the class keyword introduced in ES2015. As with other JavaScript language features, TypeScript adds type annotations and other syntax to allow you to express relationships between classes and other types.

Table of Contents

Class Members

Here's the most basic class - an empty one:

class Point {

}Try

This class isn't very useful yet, so let's start adding some members.

Fields

A field declaration creates a public writeable property on a class:

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

const pt = new Point();
pt.x = 0;
pt.y = 0;Try

As with other locations, the type annotation is optional, but will be an implict any if not specified.

Fields can also have initializers; these will run automatically when the class is instantiated:

class Point {
    x = 0;
    y = 0;
}

const pt = new Point();
// Prints 0, 0
console.log(`${pt.x}, ${pt.y}`);Try

Just like with const, let, and var, the initializer of a class property will be used to infer its type:

const pt = new Point();
pt.xType '"0"' is not assignable to type 'number'. = "0";
Type '"0"' is not assignable to type 'number'.

--strictPropertyInitialization

The strictPropertyInitialization setting controls whether class fields need to be initialized in the constructor.

class BadGreeter {
  nameProperty 'name' has no initializer and is not definitely assigned in the constructor.: string;
}
Property 'name' has no initializer and is not definitely assigned in the constructor.
Try

class GoodGreeter {
  name: string;

  constructor() {
    this.name = "hello";
  }
}Try

Note that the field needs to be initialized in the constructor itself. TypeScript does not analyze methods you invoke from the constructor to detect initializations, because a derived class might override those methods and fail to initialize the members.

If you intend to definitely initialize a field through means other than the constructor (for example, maybe an external library is filling in part of your class for you), you can use the definite assignment assertion operator, !:

class OKGreeter {
  // Not initialized, but no error
  name!: string;
}Try

readonly

Fields may be prefixed with the readonly modifier. This prevents assignments to the field outside of the constructor.

class Greeter {
  readonly name: string = "world";

  constructor(otherName?: string) {
    if (otherName !== undefined) {
      this.name = otherName;
    }
  }

  err() {
    this.nameCannot assign to 'name' because it is a read-only property. = "not ok";
  }
}
const g = new Greeter();
g.nameCannot assign to 'name' because it is a read-only property. = "also not ok";
Cannot assign to 'name' because it is a read-only property.
Cannot assign to 'name' because it is a read-only property.
Try

Constructors

Background Reading: Constructor (MDN)

Class constructors are very similar to functions. You can add parameters with type annotations, default values, and overloads:

class Point {
  x: number;
  y: number;

  // Normal signature with defaults
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
  }
}Try

class Point {
  // Overloads
  constructor(x: number, y: string);
  constructor(s: string);
  constructor(xs: any, y?: any) {
    // TBD
  }
}Try

There are just a few differences between class constructor signatures and function signatures:

Super Calls

Just as in JavaScript, if you have a base class, you'll need to call super(); in your constructor body before using any this. members:

class Base {
  k = 4;
}

class Derived extends Base {
  constructor() {
    // Prints a wrong value in ES5; throws exception in ES6
    console.log(this'super' must be called before accessing 'this' in the constructor of a derived class..k);
    super();
  }
}
'super' must be called before accessing 'this' in the constructor of a derived class.
Try

Forgetting to call super is an easy mistake to make in JavaScript, but TypeScript will tell you when it's necessary.

Methods

A function property on a class is called a method. Methods can use all the same type annotations as functions and constructors:

class Point {
  x = 10;
  y = 10;

  scale(n: number): void {
    this.x *= n;
    this.y *= n;
  }
}Try

Other than the standard type annotations, TypeScript doesn't add anything else new to methods.

Note that inside a method body, it is still mandatory to access fields and other methods via this.. An unqualified name in a method body will always refer to something in the enclosing scope:

let x: number = 0;

class C {
  x: string = "hello";

  m() {
    // This is trying to modify 'x' from line 1, not the class property
    xType '"world"' is not assignable to type 'number'. = "world";
  }
}
Type '"world"' is not assignable to type 'number'.
Try

Getters / Setters

Classes can also have accessors:

class C {
  _length = 0;
  get length() {
    return this._length;
  }
  set length(value) {
    this._length = value;
  }
}Try

Note that a field-backed get/set pair with no extra logic is very rarely useful in JavaScript. It's fine to expose public fields if you don't need to add additional logic during the get/set operations.

TypeScript has some special inference rules for accessors:

It is not possible to have accessors with different types for getting and setting.

If you have a getter without a setter, the field is automatically readonly

Index Signatures

Classes can declare index signatures; these work the same as Index Signatures for other object types:

class MyClass {
  [s: string]: boolean | ((s: string) => boolean);
  check(s: string) {
    return this[s] as boolean;
  }
}Try

Because the index signature type needs to also capture the types of methods, it's not easy to usefully use these types. Generally it's better to store indexed data in another place instead of on the class instance itself.

Class Heritage

Like other langauges with object-oriented features, classes in JavaScript can inherit from base classes.

implements Clauses

You can use an implements clause to check that a class satisfies a particular interface. An error will be issued if a class fails to correctly implement it:

interface Pingable {
  ping(): void;
}

class Sonar implements Pingable {
  ping() {
    console.log('ping!');
  }
}

class BallClass 'Ball' incorrectly implements interface 'Pingable'.
  Property 'ping' is missing in type 'Ball' but required in type 'Pingable'. implements Pingable {
  pong() {
    console.log('pong!');
  }
}
Class 'Ball' incorrectly implements interface 'Pingable'.
Property 'ping' is missing in type 'Ball' but required in type 'Pingable'.
Try

Classes may also implement multiple interfaces, e.g. class C implements A, B {.

Cautions

It's important to understand that an implements clause is only a check that the class can be treated as the interface type. It doesn't change the type of the class or its methods at all. A common source of error is to assume that an implements clause will change the class type - it doesn't!

interface Checkable {
  check(name: string): boolean;
}
class NameChecker implements Checkable {
  check(s) {
    // Notice no error here
    return s.toLowercse() === "ok";
           (parameter) s: any
  }
}Try

In this example, we perhaps expected that s's type would be influenced by the name: string parameter of check. It is not - implements clauses don't change how the class body is checked or its type inferred.

Similarly, implementing an interface with an optional property doesn't create that property:

interface A {
  x: number;
  y?: number;
}
class C implements A {
  x = 0;
}
const c = new C();
c.yProperty 'y' does not exist on type 'C'. = 10;
Property 'y' does not exist on type 'C'.
Try

extends Clauses

Classes may extend from a base class. A derived class has all the properties and methods of its base class, and also define additional members.

class Animal {
  move() {
    console.log("Moving along!");
  }
}

class Dog extends Animal {
  woof(times: number) {
    for (let i = 0; i < times; i++) {
      console.log("woof!");
    }
  }
}

const d = new Dog();
// Base class method
d.move();
// Derived class method
d.woof(3);Try

Overriding Methods

A derived class can also override a base class field or property. You can use the super. syntax to access base class methods. Note that because JavaScript classes are a simple lookup object, there is no notion of a "super field".

TypeScript enforces that a derived class is always a subtype of its base class.

For example, here's a legal way to override a method:

class Base {
  greet() {
    console.log("Hello, world!");
  }
}

class Derived extends Base {
  greet(name?: string) {
    if (name === undefined) {
      super.greet();
    } else {
      console.log(`Hello, ${name.toUpperCase()}`);
    }
  }
}

const d = new Derived();
d.greet();
d.greet("reader");Try

It's important that a derived class follow its base class contract. Remember that it's very common (and always legal!) to refer to a derived class instance through a base class reference:

// Alias the derived instance through a base class reference
const b: Base = d;
// No problem
b.greet();Try

What if Derived didn't follow Base's contract?

class Base {
  greet() {
    console.log("Hello, world!");
  }
}

class Derived extends Base {
  // Make this parameter required
  greetProperty 'greet' in type 'Derived' is not assignable to the same property in base type 'Base'.
  Type '(name: string) => void' is not assignable to type '() => void'.(name: string) {
    console.log(`Hello, ${name.toUpperCase()}`);
  }
}
Property 'greet' in type 'Derived' is not assignable to the same property in base type 'Base'.
Type '(name: string) => void' is not assignable to type '() => void'.
Try

If we compiled this code despite the error, this sample would then crash:

const b: Base = new Derived();
// Crashes because "name" will be undefined
b.greet();Try

Initialization Order

The order that JavaScript classes initialize can be surprising in some cases. Let's consider this code:

class Base {
  name = "base";
  constructor() {
    console.log("My name is " + name);
  }
}

class Derived extends Base {
  name = "derived";
}

// Prints "base", not "derived"
const d = new Derived();Try

What happened here?

The order of class initialization, as defined by JavaScript, is:

This means that the base class constructor saw its own value for name during its own constructor, because the derived class field initializations hadn't run yet.

Inheriting Built-in Types

Note: If you don't plan to inherit from built-in types like Array, Error, Map, etc., you may skip this section

In ES2015, constructors which return an object implicitly substitute the value of this for any callers of super(...). It is necessary for generated constructor code to capture any potential return value of super(...) and replace it with this.

As a result, subclassing Error, Array, and others may no longer work as expected. This is due to the fact that constructor functions for Error, Array, and the like use ECMAScript 6's new.target to adjust the prototype chain; however, there is no way to ensure a value for new.target when invoking a constructor in ECMAScript 5. Other downlevel compilers generally have the same limitation by default.

For a subclass like the following:

class FooError extends Error {
    constructor(m: string) {
        super(m);
    }
    sayHello() {
        return "hello " + this.message;
    }
}Try

you may find that:

As a recommendation, you can manually adjust the prototype immediately after any super(...) calls.

class FooError extends Error {
    constructor(m: string) {
        super(m);

        // Set the prototype explicitly.
        Object.setPrototypeOf(this, FooError.prototype);
    }

    sayHello() {
        return "hello " + this.message;
    }
}Try

However, any subclass of FooError will have to manually set the prototype as well. For runtimes that don't support Object.setPrototypeOf, you may instead be able to use __proto__.

Unfortunately, these workarounds will not work on Internet Explorer 10 and prior. One can manually copy methods from the prototype onto the instance itself (i.e. FooError.prototype onto this), but the prototype chain itself cannot be fixed.

Member Visibility

You can use TypeScript to control whether certain methods or properties are visible to code outside the class.

public

The default visibility of class members is public. A public member can be accessed by anywhere:

class Greeter {
  public greet() {
    console.log("hi!");
  }
}
const g = new Greeter();
g.greet();Try

Because public is already the default visibility modifier, you don't ever need to write it on a class member, but might choose to do so for style/readability reasons.

protected

protected members are only visible to subclasses of the class they're declared in.

class Greeter {
  public greet() {
    console.log("Hello, " + this.getName());
  }
  protected getName() {
    return "hi";
  }
}

class SpecialGreeter extends Greeter {
  public howdy() {
    // OK to access protected member here
    console.log("Howdy, " + this.getName());
  }
}
const g = new SpecialGreeter();
g.greet(); // OK
g.getNameProperty 'getName' is protected and only accessible within class 'Greeter' and its subclasses.();
Property 'getName' is protected and only accessible within class 'Greeter' and its subclasses.
Try

Exposure of protected members

Derived classes need to follow their base class contracts, but may choose to expose a more general type with more capabilities. This includes making protected members public:

class Base {
  protected m = 10;
}
class Derived extends Base {
  // No modifier, so default is 'public'
  m = 15;
}
const d = new Derived();
console.log(d.m); // OKTry

Note that Derived was already able to freely read and write m, so this doesn't meaningfully alter the "security" of this situation. The main thing to note here is that in the derived class, we need to be careful to repeat the protected modifier if this exposure isn't intentional.

Cross-hierarchy protected access

Different OOP languages disagree about whether it's legal to access a protected member through a base class reference:

class Base {
    protected x: number = 1;
}
class Derived1 extends Base {
    protected x: number = 5;
}
class Derived2 extends Base {
    f1(other: Derived2) {
        other.x = 10;
    }
    f2(other: Base) {
        other.xProperty 'x' is protected and only accessible through an instance of class 'Derived2'. = 10;
    }
}
Property 'x' is protected and only accessible through an instance of class 'Derived2'.
Try

Java, for example, considers this to be legal. On the other hand, C# and C++ chose that this code should be illegal.

TypeScript sides with C# and C++ here, because accessing x in Derived2 should only be legal from Derived2's subclasses, and Derived1 isn't one of them. Moreover, if accessing x through a Derived2 reference is illegal (which it certainly should be!), then accessing it through a base class reference should never improve the situation.

See also Why Can’t I Access A Protected Member From A Derived Class? which explains more of C#'s reasoning.

private

private is like protected, but doesn't allow access to the member even from subclasses:

class Base {
  private x = 0;
}
const b = new Base();
// Can't access from outside the class
console.log(b.xProperty 'x' is private and only accessible within class 'Base'.);
Property 'x' is private and only accessible within class 'Base'.
Try

class Derived extends Base {
  showX() {
    // Can't access in subclasses
    console.log(this.xProperty 'x' is private and only accessible within class 'Base'.);
  }
}
Property 'x' is private and only accessible within class 'Base'.
Try

Because private members aren't visible to derived classes, a derived class can't increase its visibility:

class Base {
  private x = 0;
}
class DerivedClass 'Derived' incorrectly extends base class 'Base'.
  Property 'x' is private in type 'Base' but not in type 'Derived'. extends Base {
  x = 1;
}
Class 'Derived' incorrectly extends base class 'Base'.
Property 'x' is private in type 'Base' but not in type 'Derived'.
Try

Cross-instance private access

Different OOP languages disagree about whether different instances of the same class may access each others' private members. While languages like Java, C#, C++, Swift, and PHP allow this, Ruby does not.

TypeScript does allow cross-instance private access:

class A {
  private x = 10;

  public sameAs(other: A) {
    // No error
    return other.x === this.x;
  }
}Try

Caveats

Like other aspects of TypeScript's type system, private and protected are only enforced during type checking. This means that JavaScript runtime constructs like in or simple property lookup can still access a private or protected member:

class MySafe {
  private secretKey = 12345;
}Try

// In a JavaScript file...
const s = new MySafe();
// Will print 12345
console.log(s.secretKey);Try

If you need to protect values in your class from malicious actors, you should use mechanisms that offer hard runtime privacy, such as closures, weak maps, or private fields.

Static Members

Classes may have static members. These members aren't associated with a particular instance of the class. They can be accessed through the class constructor object itself:

class MyClass {
  static x = 0;
  static printX() {
    console.log(MyClass.x);
  }
}
console.log(MyClass.x);
MyClass.printX();Try

Static members can also use the same public, protected, and private visibility modifiers:

class MyClass {
  private static x = 0;
}
console.log(MyClass.xProperty 'x' is private and only accessible within class 'MyClass'.);
Property 'x' is private and only accessible within class 'MyClass'.
Try

Static members are also inherited:

class Base {
  static getGreeting() {
    return "Hello world";
  }
}
class Derived extends Base {
  myGreeting = Derived.getGreeting();
}Try

Special Static Names

It's generally not safe/possible to overwrite properties from the Function prototype. Because classes are themselves functions that can be invoked with new, certain static names can't be used. Function properties like name, length, and call aren't valid to define as static members:

class S {
  static nameStatic property 'name' conflicts with built-in property 'Function.name' of constructor function 'S'. = "S!";
}
Static property 'name' conflicts with built-in property 'Function.name' of constructor function 'S'.
Try

Why No Static Classes?

TypeScript (and JavaScript) don't have a construct called static class the same way C# and Java do.

Those constructs only exist because those languages force all data and functions to be inside a class; because that restriction doesn't exist in TypeScript, there's no need for them. A class with only a single instance is typically just represented as a normal object in JavaScript/TypeScript.

For example, we don't need a "static class" syntax in TypeScript because a regular object (or even top-level function) will do the job just as well:

// Unnecessary "static" class
class MyStaticClass {
    static doSomething() {

    }
}

// Preferred (alternative 1)
function doSomething() {

}

// Preferred (alternative 2)
const MyHelperObject = {
    dosomething() {

    }
}Try

Generic Classes

Classes, much like interfaces, can be generic. When a generic class is instantiated with new, its type parameters are inferred the same way as in a function call:

class Box<T> {
  contents: T;
  constructor(value: T) {
    this.contents = value;
  }
}

const b = new Box("hello!");
      const b: Box<string>Try

Classes can use generic constraints and defaults the same way as interfaces.

Type Parameters in Static Members

This code isn't legal, and it may not be obvious why:

class Box<T> {
  static defaultValue: TStatic members cannot reference class type parameters.;
}
Static members cannot reference class type parameters.
Try

Remember that types are always fully erased! At runtime, there's only one Box.defaultValue property slot. This means that setting Box<string>.defaultValue (if that were possible) would also change Box<number>.defaultValue - not good. The static members of a generic class can never refer to the class's type parameters.

this at Runtime in Classes

It's important to remember that TypeScript doesn't change the runtime behavior of JavaScript, and that JavaScript is somewhat famous for having some peculiar runtime behaviors.

JavaScript's handling of this is indeed unusual:

class MyClass {
  name = "MyClass";
  getName() {
    return this.name;
  }
}
const c = new MyClass();
const obj = {
  name: "obj",
  getName: c.getName
};

// Prints "obj", not "MyClass"
console.log(obj.getName());Try

Long story short, by default, the value of this inside a function depends on how the function was called. In this example, because the function was called through the obj reference, its value of this was obj rather than the class instance.

This is rarely what you want to happen! TypeScript provides some ways to mitigate or prevent this kind of error.

Arrow Functions

If you have a function that will often be called in a way that loses its this context, it can make sense to use an arrow function property instead of a method definition:

class MyClass {
  name = "MyClass";
  getName = () => {
    return this.name;
  }
}
const c = new MyClass();
const g = c.getName;
// Prints "MyClass" instead of crashing
console.log(g());Try

This has some trade-offs:

this parameters

In a method or function definition, an initial parameter named this has special meaning in TypeScript. These parameters are erased during compilation:

// TypeScript input with 'this' parameter
function fn(this: SomeType, x: number) {
  /* ... */
}Try
// JavaScript output
function fn(x) {
  /* ... */
}Try

TypeScript checks that calling a function with a this parameter is done so with a correct context. Instead of using an arrow function, we can add a this parameter to method definitions to statically enforce that the method is called correctly:

class MyClass {
  name = "MyClass";
  getName(this: MyClass) {
    return this.name;
  }
}
const c = new MyClass();
// OK
c.getName();

// Error, would crash
const g = c.getName;
console.log(g()The 'this' context of type 'void' is not assignable to method's 'this' of type 'MyClass'.);
The 'this' context of type 'void' is not assignable to method's 'this' of type 'MyClass'.
Try

This method takes the opposite trade-offs of the arrow function approach:

this Types

In classes, a special type called this refers dynamically to the type of the current class. Let's see how this is useful:

class Box {
  contents: string = "";
  set(value: string) {
   (method) Box.set(value: string): this
    this.contents = value;
    return this;
  }
}Try

Here, TypeScript inferred the return type of set to be this, rather than Box. Now let's make a subclass of Box:

class ClearableBox extends Box {
  clear() {
    this.contents = "";
  }
}

const a = new ClearableBox();
const b = a.set("hello");
      const b: ClearableBoxTry

You can also use this in a parameter type annotation:

class Box {
  content: string = "";
  sameAs(other: this) {
    return other.content === this.content;
  }
}Try

This is different from writing other: Box -- if you have a derived class, its sameAs method will now only accept other instances of that same derived class:

class Box {
  content: string = "";
  sameAs(other: this) {
    return other.content === this.content;
  }
}

class DerivedBox extends Box  {
  otherContent: string = "?";
}

const base = new Box();
const derived = new DerivedBox();
derived.sameAs(baseArgument of type 'Box' is not assignable to parameter of type 'DerivedBox'.
  Property 'otherContent' is missing in type 'Box' but required in type 'DerivedBox'.);
Argument of type 'Box' is not assignable to parameter of type 'DerivedBox'.
Property 'otherContent' is missing in type 'Box' but required in type 'DerivedBox'.
Try

Parameter Properties

TypeScript offers special syntax for turning a constructor parameter into a class property with the same name and value. These are called parameter properties and are created by prefixing a constructor argument with one of the visibility modifiers public, private, protected, or readonly. The resulting field gets those modifier(s):

class A {
  constructor (public readonly x: number, protected y: number, private z: number) {
    // No body necessary
  }
}
const a = new A(1, 2, 3);
console.log(a.x);
              (property) A.x: number
console.log(a.zProperty 'z' is private and only accessible within class 'A'.);
Property 'z' is private and only accessible within class 'A'.
Try

Class Expressions

Class expressions are very similar to class declarations. The only real difference is that class expressions don't need a name, though we can refer to them via whatever identifier they ended up bound to:

const someClass = class<T> {
  content: T;
  constructor(value: T) {
    this.content = value;
  }
}

const m = new someClass("Hello, world");
      const m: someClass<string>Try

abstract Classes and Members

Classes, methods, and fields in TypeScript may be abstract.

An abstract method or abstract field is one that hasn't had an implementation provided. These members must exist inside an abstract class, which cannot be directly instantiated.

The role of abstract classes is to serve as a base class for subclasses which do implement all the abstract members. When a class doesn't have any abstract members, it is said to be concrete.

Let's look at an example

abstract class Base {
  abstract getName(): string;

  printName() {
    console.log("Hello, " + this.getName());
  }
}

const b = new Base()Cannot create an instance of an abstract class.;
Cannot create an instance of an abstract class.
Try

We can't instantiate Base with new because it's abstract. Instead, we need to make a derived class and implement the abstract members:

class Derived extends Base {
  getName() {
    return "world";
  }
}

const d = new Derived();
d.printName();Try

Notice that if we forget to implement the base class's abstract members, we'll get an error:

class DerivedNon-abstract class 'Derived' does not implement inherited abstract member 'getName' from class 'Base'. extends Base {
  // forgot to do anything
}
Non-abstract class 'Derived' does not implement inherited abstract member 'getName' from class 'Base'.
Try

Abstract Construct Signatures

Sometimes you want to accept some class constructor function that produces an instance of a class which derives from some abstract class.

For example, you might want to write this code:

function greet(ctor: typeof Base) {
  const instance = new ctor()Cannot create an instance of an abstract class.;
  instance.printName();
}
Cannot create an instance of an abstract class.
Try

TypeScript is correctly telling you that you're trying to instantiate an abstract class. After all, given the definition of greet, it's perfectly legal to write this code, which would end up constructing an abstract class:

// Bad!
greet(Base);

Instead, you want to write a function that accepts something with a construct signature:

function greet(ctor: new() => Base) {
  const instance = new ctor();
  instance.printName();
}
greet(Derived);
greet(BaseArgument of type 'typeof Base' is not assignable to parameter of type 'new () => Base'.
  Cannot assign an abstract constructor type to a non-abstract constructor type.);
Argument of type 'typeof Base' is not assignable to parameter of type 'new () => Base'.
Cannot assign an abstract constructor type to a non-abstract constructor type.
Try

Now TypeScript correctly tells you about which class constructor functions can be invoked - Derived can because it's concrete, but Base cannot.

Relationships Between Classes

In most cases, classes in TypeScript are compared structurally, the same as other types.

For example, these two classes can be used in place of each other because they're identical:

class Point1 {
  x = 0;
  y = 0;
}

class Point2 {
  x = 0;
  y = 0;
}

// OK
const p: Point1 = new Point2();Try

Similarly, subtype relationships between classes exist even if there's no explicit inheritance:

class Person {
  name: string;
  age: number;
}

class Employee {
  name: string;
  age: number;
  salary: number;
}

// OK
const p: Person = new Employee();Try

This sounds straightforward, but there are a few cases that seem stranger than others.

Empty classes have no members. In a structural type system, a type with no members is generally a supertype of anything else. So if you write an empty class (don't!), anything can be used in place of it:

class Empty { }

function fn(x: Empty) {
  // can't do anything with 'x', so I won't
}

// All OK!
fn(window);
fn({ });
fn(fn);Try