Maybe Types(我称他为判断类型)

如果你想使用一个非number类型的参数，可以如下定义，当然判断类型是可以接受null 和 undefined的参数。

function acceptsMaybeNumber(value: ?number) {
    // ...
}
acceptsMaybeNumber(42);        // Works!
acceptsMaybeNumber();          // Works!
acceptsMaybeNumber(undefined); // Works!
acceptsMaybeNumber(null);      // Works!
acceptsMaybeNumber("42");      // Error!

Maybe Types 进阶

假设我们有个 Maybe Types ?number, 如果我们想使用该值作为一个数字，我们需要首先检查它是不是null或undefined。

// @flow
function acceptsMaybeNumber(value: ?number) {
  if (value !== null && value !== undefined) {
    return value * 2;
  }
}

您可以使用单个!=null检查简化针对null和nudefined的两种检查，这两种检查都可以完成。

// @flow
function acceptsMaybeNumber(value: ?number) {
  if (value != null) {
    return value * 2;
  }
}

您也可以将其翻转，并在使用前检查以确保该值具有一种类型的数字。

// @flow
function acceptsMaybeNumber(value: ?number) {
  if (typeof value === 'number') {
    return value * 2;
  }
}

Variable Types

// @flow
const foo /* : number */ = 1;
const bar: number = 2;

当你给变量声明类型的时候，你如果将它重新赋值，必须和他声明的值是一样的。

// @flow
let foo: number = 1;
foo = 2;   // Works!
// $ExpectError
foo = "3"; // Error!

Reassigning variables(重新分配变量)

默认情况下，当您重新分配一个变量时，Flow将为它提供所有可能的赋值类型

let foo = 42;

if (Math.random()) foo = true;
if (Math.random()) foo = "hello";

let isOneOf: number | boolean | string = foo; // Works!

有时，在重新分配后，flow能够(肯定地)找出变量的类型。在这种情况下，Flow将给出已知的类型。

// @flow
let foo = 42;
let isNumber: number = foo; // Works!

foo = true;
let isBoolean: boolean = foo; // Works!

foo = "hello";
let isString: string = foo; // Works!

if语句、函数和其他有条件运行的代码都可以阻止Flow精确地计算出类型是什么。

// @flow
let foo = 42;

function mutate() {
  foo = true;
  foo = "hello";
}

mutate();

// $ExpectError
let isString: string = foo; // Error!

Function Types（函数类型）

函数有两个地方需要定义类型，一个是参数，一个是返回值。

// @flow
function concat(a: string, b: string): string {
  return a + b;
}

concat("foo", "bar"); // Works!
// $ExpectError
concat(true, false);  // Error!

即使不用类型注释，有些类型也会自动检测

// @flow
function concat(a, b) {
  return a + b;
}

concat("foo", "bar"); // Works!
// $ExpectError
concat(true, false);  // Error!

有时候 Flow 会创建一种你比较希望的类型。

// @flow
function concat(a, b) {
  return a + b;
}

concat("foo", "bar"); // Works!
concat(1, 2);         // Works!

函数语法

有三种形式的函数，每种形式都有各自略有不同的语法。

函数声明

添加类型和不添加类型的函数声明语法

function method(str, bool, ...nums) {
  // ...
}

function method(str: string, bool?: boolean, ...nums: Array<number>): void {
  // ...
}

箭头函数

let method = (str, bool, ...nums) => {
  // ...
};

let method = (str: string, bool?: boolean, ...nums: Array<number>): void => {
  // ...
};

函数类型

(str: string, bool?: boolean, ...nums: Array<number>) => void

省略参数名

(string, boolean | void, Array<number>) => void

您可以将这些函数类型用于诸如回调之类的操作。

function method(param1: string, param2: boolean) {
  // ...
}

可选参数

您还可以通过在参数名称后面和冒号:之前添加一个问号来拥有可选参数：

function method(optionalValue?: string) {
  // ...
}

可选参数可以不传或者undefined或匹配的类型。但他们不会接受NULL。

// @flow
function method(optionalValue?: string) {
  // ...
}

method();          // Works.
method(undefined); // Works.
method("string");  // Works.
// $ExpectError
method(null);      // Error!

Rest 参数

在参数列表 末尾 末尾 末尾 手机参数数组的参数， 用 ... 来表示

function method(...args: Array<number>) {
  // ...
}

你可以将任意多的参数传递到 rest 参数中

// @flow
function method(...args: Array<number>) {
  // ...
}

method();        // Works.
method(1);       // Works.
method(1, 2);    // Works.
method(1, 2, 3); // Works.

需要注意的是，如果你向rest参数添加类型注释，则必须是数组类型的。

返回值

函数返回还可以使用冒号：添加类型，然后在参数列表后添加类型。如下:

function method(): number {
  // ...
}

返回类型确保函数的每个分支返回相同的类型。这样可以防止您在某些情况下意外地不返回值。

// @flow
// $ExpectError
function method(): boolean {
  if (Math.random() > 0.5) {
    return true;
  }
}

this

JavaScript中的每个函数都可以使用一个名为 this 的特殊上下文来调用。您可以使用所需的任何上下文调用函数。

function method() {
  return this;
}

var num: number = method.call(42);
// $ExpectError
var str: string = method.call(42);

Predicate函数 (额...谓词函数)

有时，您可能希望将条件从if语句移动到函数中：

function concat(a: ?string, b: ?string): string {
  if (a && b) {
    return a + b;
  }
  return '';
}

但是，Flow将在下面的代码中会出错：

function truthy(a, b): boolean {
  return a && b;
}

function concat(a: ?string, b: ?string): string {
  if (truthy(a, b)) {
    // $ExpectError
    return a + b;
  }
  return '';
}

您可以通过使truthy成为谓词函数来解决这个问题，可以使用 %check 注释，如下所示：

function truthy(a, b): boolean %checks {
  return !!a && !!b;
}

function concat(a: ?string, b: ?string): string {
  if (truthy(a, b)) {
    return a + b;
  }
  return '';
}

这些谓词函数的主体必须是表达式(即不支持局部变量声明)。但也可以调用谓词函数中的其他谓词函数。例如：

function isString(y): %checks {
  return typeof y === "string";
}

function isNumber(y): %checks {
  return typeof y === "number";
}

function isNumberOrString(y): %checks {
  return isString(y) || isNumber(y);
}

function foo(x): string | number {
  if (isNumberOrString(x)) {
    return x + x;
  } else {
    return x.length; // no error, because Flow infers that x can only be an array
  }
}

foo('a');
foo(5);
foo([]);

Callable Objects 可调用对象（本人对这个也不是特别理解，往有大神指出）

可以输入可调用对象，例如:

type CallableObj = {
  (number, number): number,
  bar: string
};

function add(x, y) {
  return x + y; 
}

// $ExpectError
(add: CallableObj);

add.bar = "hello world";

(add: CallableObj);

Function Type

有时候参数要接受任意函数的类型:

function method(func: () => mixed) {
  // ...
}

如果你需要选择退出类型检测程序，同时你有不想用any类型,你可以用function类型

function method(func: Function) {
  func(1, 2);     // Works.
  func("1", "2"); // Works.
  func({}, []);   // Works.
}

method(function(a: number, b: number) {
  // ...
});