Okay, let's try to implement a function with type check.

// String check

let isString = function (str) {
   return typeof str === 'string' ? true : str instanceof String;
}


// Number check

let isNumber = function (n) {
    return !isNaN(parseFloat(n)) && isFinite(n) ? !isString(n) : false;
}

// or es6 feature

Number.isFinite(5);


let multiply = function (a, b) {
    if (isNumber(a) && isNumber(b)) {
        return a * b;
    } else {
        throw new TypeError('Arguments should be a numbers');
    }
}

multiply(5, 5) // 25
multiply(5.5, 5) // 27.5
multiply(5, '5') // Error
multiply(NaN, 5) // Error
multiply(Infinity, 5) // Error

// Array of numbers
Array.prototype.isArrayOfNumbers = function () {
	return this.every(cur => isNumber(cur));
}

let safeMathMax = function () {
	let args = [...arguments];

	if (args.isArrayOfNumbers()) {
		return Math.max(...args);
	} else {
		throw new TypeError('arguments should be a numbers');
	}
}

console.log(Math.max(1, 3, 'qwe'));    // NaN
console.log(Math.max(1, 3, '4'));      // 4

console.log(safeMathMax(1, 4, 5));	   // 5
console.log(safeMathMax(1, 4, '5'));   // TypeError
console.log(safeMathMax(1, [4], 5));   // TypeError

Safeness level

Working with types in different languages

Flow type

• Designed by facebook team
• https://github.com/facebook/flow
• https://flowtype.org

Flow can catch common bugs in JavaScript programs before they run, including:  

• silent type conversions
• null dereferences
• and dreaded undefined is not a function
• also you can use type notations, which can be easily transform in regular JavaScript

Let's see how Flow  works without type notations.

/* @flow */

let multiply = (a , b) => a * b;

multiply(3, 'qwe');

// @flow

let getLength = val => val.length;

getLength([1, 2, 3, 4]);             // 1
getLength('JavaScript');             // 2
getLength(5);                        // 3
getLength((a, b, c) => a * b * c);   // 4
getLength({length: 'five'});         // 5
getLength({flow: 'GOT YOU?'});       // 6

// @flow

let obj = {
	name: 'Nikita',
	sayHello: function () {
		console.log(`Hello! My name is ${this.name}`);
	},
	sayHelloBad: () => console.log(`Hello! My name is ${this.name}`),

	sayHelloBad2: function () {
		setTimeout(function () {
			console.log(`Hello! My name is ${this.name}`);
		}, 100);
	}
}

obj.sayHello();     // 1
obj.sayHelloBad();  // 2
obj.sayHelloBad2(); // 3

// @flow

let sumOrConcat = (a, b) => a + b;

sumOrConcat(1, 2);     // 1
sumOrConcat('qwe', 2); // 2
sumOrConcat(1, '2');   // 3
sumOrConcat('1', '2'); // 4

Ok, without type notations flow can handle some of common JavaScript "features" but not all.

Let's see how flow works with type notations.

// @flow

let b: number;

b = 5;
b = 'qwe';
b = null;
b = undefined;
b = {number: 4};
b = [1, 2 ,3];

flow-bin
$ ./cli.js
../../script.js:6
  6: b = 'qwe';
         ^^^^^ string. This type is incompatible with
  3: let b:number;
           ^^^^^^ number

../../script.js:7
  7: b = null;
         ^^^^ null. This type is incompatible with
  3: let b:number;
           ^^^^^^ number

../../script.js:8
  8: b = undefined;
         ^^^^^^^^^ undefined. This type is incompatible with
  3: let b:number;
           ^^^^^^ number

../../script.js:9
  9: b = {number: 4};
         ^^^^^^^^^^^ object literal. This type is incompatible with
  3: let b:number;
           ^^^^^^ number

../../script.js:10
 10: b = [1, 2 ,3];
         ^^^^^^^^^ array literal. This type is incompatible with
  3: let b:number;
           ^^^^^^ number


Found 5 errors

// @flow

let multiply = function (a: number, b: number) {
    return a * b;
}

multiply(1, 2);
multiply('1', '2');
multiply('qwe', 1);

// @flow

let sumDoNotEvenThinkAboutConcat = function (a, b): number {
    return a + b;
}

sumDoNotEvenThinkAboutConcat(1, 2);
sumDoNotEvenThinkAboutConcat('1', '2');
sumDoNotEvenThinkAboutConcat('qwe', [2]);

// @flow

let array: Array<number>;

array = [1, 2 ,3];
array.push('qwe');
array.splice(1, 1, 'qwe');
array = ['1'];

You can notate:

• Variable declarations
• Function declarations
• Class declarations
• Object types
• Function types
• Array types

// variable declaration

var bar: number = 0,
    baz: boolean = true;

// function declaration

function numVowels(word: string): number {
  const vowels = new Set("aeiou");
  let count = 0;
  for (let char of word)
    if (vowels.has(char))
      count++;
  return count;
}

// Object types

type Person = {
  name: string,
  age: number,
};

// Array types

var array_of_num: number[] = [];
var array_of_num_alt: Array<number> = [];
var optional_array_of_num: ?number[] = null;
var array_of_optional_num: Array<?number> = [null, 0];


// class declaration

class Point {
  x: number;
  y: number;

  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }

  move(x: number, y: number) {
    this.x += x;
    this.y += y;
  }

  copy(): Point {
    return new Point(this.x, this.y);
  }
}

Full syntax documentation here

Getting started with flow.

$> mkdir -p get_started
$> cd get_started
$> echo '{"name": "get_started", "scripts": {"flow": "flow; test $? -eq 0 -o $? -eq 2"}}' > package.json

$> touch .flowconfig
$> npm install --save-dev flow-bin

• TypeScript and Flow have influenced each other heavily
• Basic typings are pretty similar
• Flow can catch common type errors without any type notations
• Both also support React
• Flow can even understand TypeScript declaration files
• TypeScript is a compiler, Flow is a checker
• Flow written in OCaml, Typescript in Typescript