Class 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.

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).

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

Class Fields (Properties)

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

// @flow
class MyClass {
  method() {
    // $ExpectError
    this.prop = 42; // Error!
  }
}

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

// @flow
class MyClass {
  prop: number;
  method() {
    this.prop = 42;
  }
}

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

// @flow
function func_we_use_everywhere (x: number): number {
  return x + 1;
}
class MyClass {
  static constant: number;
  static helper: (number) => number;
  method: number => number;
}
MyClass.helper = func_we_use_everywhere
MyClass.constant = 42
MyClass.prototype.method = func_we_use_everywhere

Flow also supports using the class properties syntax.

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.

class MyClass {
  prop: number = 42;
}

Class Generics

Classes can also have their own generics.

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.

// @flow
class MyClass<A, B, C> {
  constructor(arg1: A, arg2: B, arg3: C) {
    // ...
  }
}

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