flow

什么是flow

Flow是javascript代码的静态类型接触的一个工具。它可以使你的代码更有效率、更可控、更大规模的开发。

Flow通过静态类型检查到是否存在类型错误

// @flow
function square(n:unmber): number {
    return n * n;
}

square("2")// Error!

如果您的代码不需要类型，他也会自动帮你判断。

// @flow
function square(n) {
  return n * n; // Error!  cannot perform aritmetic operation because string [1] is not a number
}

square("2");

类型注释

添加类型注释是flow交互中的一个重要的部分。FLow具有很强的类型判断能力。但是有些时候也需要添加类型注释。

如下是一个是一个相加的函数：

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

我们既可以传字符串的参数进入：

concat("a", "b");

也可以传数字进去相加：

concat(1, 2);

但是如果你想制定一个特定的类型的话，你就需要添加类型注释。如下：

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

concat("a", "b");

concat(1, 2); 
// Error! cannot call 'cancat' with '2' bound to 'b' beacuse number is incompatible with string
// 意思是不能用数字绑定参数a或者b，就是说不能传除了字符串之外的参数

原始类型

JavaScript有很多不同的原始类型

1. Booleans
2. Strings
3. Numbers
4. null
5. undefined (void in Flow types)
6. Symbols(new in ECMAScript 2015, not yet supported in Flow)

需要注意的是，我们再flow中的类型注释需要是小写的。

Booleans

true/false 在javascript中是Booleans 的值，flow中也一样。

// @flow
function acceptsBoolean(value: boolean) {
  // ...
}
acceptsBoolean(true);  // Works!
acceptsBoolean(false); // Works!
acceptsBoolean("foo"); // Error!

js 中还可以隐式的将其他值转为booleans值

if (42) {} // 42 => true
if ("") {} // "" => false

下面代码中的函数中，在flow中是不支持隐式转换的，必须将其转换为Boolean值传入

// @flow
function acceptsBoolean(value: boolean) {
  // ...
}

acceptsBoolean(0);          // Error!
acceptsBoolean(Boolean(0)); // Works!
acceptsBoolean(!!0);        // Works!

Boolean 和 boolean值 是不同的类型

boolean值是一个与true或false类型的字面量，或者是一个表达式的结果如 a=b

Boolean是一个构造函数

Numbers

js的数字只有一种类型Number，不像其他语言一样有int float double型等。

// @flow
function acceptsNumber(value: number) {
  // ...
}

acceptsNumber(42);       // Works!
acceptsNumber(3.14);     // Works!
acceptsNumber(NaN);      // Works!
acceptsNumber(Infinity); // Works!
acceptsNumber("foo");    // Error!

**需要注意的就是 number 和 Number 也不一样**

Strings

需要注意的就是隐式转换：

"foo" + 42; // "foo42"
"foo" + {}; // "foo[object Object]"

flow 只接受字符串和数字连接的字符串。

// @flow
"foo" + "foo"; // Works!
"foo" + 42;    // Works!
"foo" + {};    // Error!
"foo" + [];    // Error!

如果想传入字符串和对象连接的字符串，必须是显式的转换才行，如下：

// @flow
"foo" + String({});     // Works!
"foo" + [].toString();  // Works!
"" + JSON.stringify({}) // Works!

null and void

js中具有null和undefined, flow中对他们两个进行了单独处理

// @flow
function acceptsNull(value: null) {
  /* ... */
}

function acceptsUndefined(value: void) {
  /* ... */
}

acceptsNull(null);      // Works!
acceptsNull(undefined); // Error!
acceptsUndefined(null);      // Error!
acceptsUndefined(undefined); // Works!
Maybe types（判断类型）

在前面加一个问号创建类型。 ?string ?number

除了判断的类型之外，也可以是null 或者 void

// @flow
function acceptsMaybeString(value: ?string) {
  // ...
}
acceptsMaybeString("bar");     // Works!
acceptsMaybeString(undefined); // Works!
acceptsMaybeString(null);      // Works!
acceptsMaybeString();          // Works!

可选对象属性

直接上例子了，看完例子相信大家都明白了

// @flow
function acceptsObject(value: { foo?: string }) {
  // ...
}

acceptsObject({ foo: "bar" });     // Works!
acceptsObject({ foo: undefined }); // Works!
acceptsObject({ foo: null });      // Error!
acceptsObject({});                 // Works!

可选函数参数

// @flow
function acceptsOptionalString(value?: string) {
  // ...
}

acceptsOptionalString("bar");     // Works!
acceptsOptionalString(undefined); // Works!
acceptsOptionalString(null);      // Error!
acceptsOptionalString();          // Works!

具有默认值的函数参数

// @flow
function acceptsOptionalString(value: string = "foo") {
  // ...
}

acceptsOptionalString("bar");     // Works!
acceptsOptionalString(undefined); // Works!
acceptsOptionalString(null);      // Error!
acceptsOptionalString();          // Works!、