Class Types

Typing classes and using classes as types

JavaScript classes in Flow operate both as a value and a type.

You write classes the same way you would without Flow, but then you can use the name of the class as a type.

1
2
3
4
5
 
class MyClass {
  // ...
}

let myInstance: MyClass = new MyClass();

This is because classes in Flow are nominally typed.

Class Syntax

Classes in Flow are identical to normal JavaScript classes, but with added types.

Class Methods

Just like in functions, class methods can have annotations for both parameters (input) and returns (output).

1
2
3
 
class MyClass {
  method(value: string): number { /* ... */ }
}

Also just like regular functions, class methods may have this annotations as well. However, if one is not provided, Flow will infer the class instance type (or the class type for static methods) instead of mixed. When an explicit this parameter is provided, it must be a supertype of the class instance type (or class type for static methods).

1
2
3
 
class MyClass {
  method(this : interface { x : string }): void { /* ... */ } // x is missing in `MyClass`
}

Unlike class properties, however, class methods cannot be unbound or rebound from the class on which you defined them. So all of the following are errors in Flow:

1
2
3
4
 
let c = new MyClass();
c.method;
let {method} = c;
c.method.bind({});
Class Fields (Properties)

Whenever you want to use a class field in Flow you must first give it an annotation.

1
2
3
4
5
6
7
 
// @flow
class MyClass {
  method() {
    // $ExpectError
    this.prop = 42; // Error!
  }
}
Cannot assign `42` to `this.prop` because property `prop` is missing in `MyClass` [1]. [prop-missing]

Fields are annotated within the body of the class with the field name followed by a colon : and the type.

1
2
3
4
5
6
7
 
// @flow
class MyClass {
  prop: number;
  method() {
    this.prop = 42;
  }
}

Fields added outside of the class definition need to be annotated within the body of the class.

1
2
3
4
5
6
7
8
9
10
11
12
 
// @flow
function func_we_use_everywhere (x: number): number {
  return x + 1;
}
class MyClass {
  static constant: number;
  static helper: (number) => number;
  function_property: number => number;
}
MyClass.helper = func_we_use_everywhere
MyClass.constant = 42
MyClass.prototype.function_property = func_we_use_everywhere

Flow also supports using the class properties syntax.

1
2
3
 
class MyClass {
  prop = 42;
}

When using this syntax, you are not required to give it a type annotation. But you still can if you need to.

1
2
3
 
class MyClass {
  prop: number = 42;
}
Class Generics

Classes can also have their own generics.

1
2
3
4
5
6
 
class MyClass<A, B, C> {
  property: A;
  method(val: B): C {
    // ...
  }
}

Class generics are parameterized. When you use a class as a type you need to pass parameters for each of its generics.

1
2
3
4
5
6
7
8
 
// @flow
class MyClass<A, B, C> {
  constructor(arg1: A, arg2: B, arg3: C) {
    // ...
  }
}

var val: MyClass<number, boolean, string> = new MyClass(1, true, 'three');

Classes in annotations

When you use the name of your class in an annotation, it means an instance of your class:

1
2
3
4
 
//@flow
class MyClass {}
(MyClass: MyClass); // Error
(new MyClass(): MyClass); // Ok
Cannot cast `MyClass` to `MyClass` because class `MyClass` [1] is incompatible with `MyClass` [2]. [incompatible-cast]

See here for details on Class<T>, which allows you to refer to the type of the class in an annotation.

← Tuple Types Type Aliases →

Was this guide helpful? Let us know by sending a message to @flowtype.