class vs type in Flow - flowtype

Question

In Flow, why would one use a class versus a type?
type Point = {x: number; y: number};
class Point = {x: number; y: number};

Answer 1

In your example, a type is all you need.
But if you want to define methods, you'll want to use a class.
class Point {
x: number;
y: number;
constructor(x, y) {this.x = x; this.y = y;}
distance_from_origin(): number { /* code goes here */ }
angle_from_origin(): number { /* code goes here */ }
}
p: Point = new Point(2, 3);
d = p.distance_from_origin()
Types are a flow features for compile-time checking, to help you catch errors in your code. They are entirely stripped from the code before running it.
Classes aren't a Flow feature at all (Although Flow understands classes - every class you create also defines a Flow type) - they're a feature of ES6, the next version of JavaScript. Babel, the same program that strips Flow types from your code to make it valid JavaScript, can also convert your classes to ES5-compatible code.

Answer 2

Classes provide nominal typing, while object types provide structural typing.
Suppose I wanted to introduce a Vector type with x and y fields. When I go to create my add(p: Point, v: Vector): Point function, structural typing proves inadequate, e.g.
type Point = {x: number, y: number};
type Vector = {x: number, y: number};
function add(p: Point, v: Vector): Point {
return {x: p.x + v.x, y: p.y + v.y};
}
const p1: Point = {x:0, y:5};
const p2: Point = {x:2, y:3};
const v: Vector = add(p1, p2); // This is not an error in Flow
Contrast that against the nominally typed version with classes:
class Point { x: number; y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
}
class Vector { x: number; y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
}
function add(p: Point, v: Vector): Point {
return new Point(p.x + v.x, p.y + v.y);
}
const p1: Point = new Point(0, 5);
const p2: Point = new Point(2, 3);
const v: Vector = add(p1, p2); // Error: p2 isn't a Vector
(In reality you'd probably attach add as a method on the point class, but I've left it separate for parallel structure with the object type example.)
Note that you can use a tag field to get some semblance of nominal typing from object types, e.g.
type Point = { tag: "point", x: number y: number };
type Vector = { tag: "vector", x: number, y: number };
If your class doesn't have any methods, then I would suggest that this is the way to go.

Answer 3

As seen in the documentation, flow treats objects and classes differently. (And even if you are transpiring to ES5, flow checking happens before that.)
A class is compared by name. An object type is compared by structure.
In fact, the type alias is just a shorter way of writing the type structure annotation. It is like a variable containing the longer expression.
type A = {wow: number}
type B = {wow: number}
let a:A = {wow: 1}
let b:B = {wow: 2}
; [a, b] = [b, a] // fine
console.log(a, b) // > { wow: 2 } { wow: 1 }
class C {
constructor (x: number) { this.wow = x }
wow: number
}
class D {
constructor (x: number) { this.wow = x }
wow: number
}
let c:C = new C(3)
let d:D = new D(4)
c = d // ERROR: D This type is incompatible with C
d = b // ERROR: object type This type is incompatible with D
As you can see, two classes with identical structure are not compatible.
NOTE: There are ways to make different classes compatible, eg Union Types or Interfaces