Flowcheck.js

Runtime type checking for Flow.

"Si vis pacem, para bellum"
(Vegetius 5th century)

Why?

Use types annotations today, even if you don't actually use Flow (or TypeScript). Then strip the assertions in production.

Flowcheck comes with a built-in browserify transformer and supports sourcemaps for a seamless workflow integration.

You can even use Flowcheck as a general purpose validation library.

How it works?

Flowcheck adds asserts for each type annotation using jstransform.

If an assert fails the debugger kicks in so you can inspect the stack and quickly find out what's wrong.

Workflow

  1. Write your code adding type annotations
  2. (optional) enable the Flow static type checker
  3. enable Flowcheck.js and strip type annotations (with react-tools or 6to5) during development
  4. disable Flowcheck.js in production for zero overhead

Example

Input


// basic types
var n: number = 1;

// lists
var arr: Array<string> = ['a', 'b'];

// functions
function sum(a: number, b: number) {
  return a + b;
}

// type alias
type MyType = Array<number>;

// ES6 classes
class Person {
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

Output


var _f = require("flowcheck/assert");

// basic types
var n = _f.check(1, _f.number);

// lists
var arr = _f.check(['a', 'b'], _f.list(_f.string));

// functions
function sum(a, b) {
  f.check(arguments, _f.args([_f.number, _f.number]));
  return a + b;
}

// type alias
var MyType = _f.list(_f.number);

// ES6 classes
class Person {
  constructor(name, age) {
    _f.check(arguments, _f.args([_f.string, _f.number]));
    this.name = name;
    this.age = age;
  }
}

Quick setup


npm install flowcheck
browserify -t flowcheck -t [reactify --strip-types] input.js -o output.js