flow

• flow 是 Facebook 出品的 JavaScript 静态类型检查工具。 vue 的源码利用了 flow 做了静态检查.

为什么用 flow

• JavaScript 是动态类型语言，它的灵活性很高，但是其副作用就是会容易写出非常隐蔽的有隐患的代码。
• 并且类型检查是当前动态类型语言的一个发展趋势，什么是类型检查？ -> 就是在编译的时候尽早发现 bug, 又不会影响代码的运行。
• 当项目越复杂的时候，就越需要通过一些工具来检测项目的维护性，代码的可读性。vue 在重构 2.0 的时候，在 ES2015 的基础上，除了用 ESLint 保证代码风格更以外，也引入了 flow 做静态类型检查。为什么选择 flow ，主要是因为 Babel 和 ESLint 都有对应的 flow 插件的支持语法。

flow 的使用方式

• 类型推断: 通过变量的使用上下文来推断变量类型，然后根据这些推断来检查类型。
• 类型注释: 事先注释好我们期待的类型，flow 会基于这些注释类判断

类型判断

• 它不需要任何代码修改即可进行类型检查。

    /*@flow*/
    function split(str) {
      return str.split(' ')
    }
    split(11)
  

• flow 检查上述代码就会报错，因为函数期待的参数是字符串，而不是数字

类型注释

• 类型推断是 flow 最有用的特性之一，不需要写类型注释就能获取有用的反馈。但在有些场景下，添加类型注释可以提供更好的检查依据。

    例如:
    function add(x, y) {
      return x + y;
    }
  
    add('你好', 66)
  

• flow 检查上述代码的时候会检测不出任何错误，在语法的层面考虑，+ 即可以用在字符串上，也可以用在数字上，而上述并没有指出必须为数字。

• 这种情况下，就可以借助类型注释来指明期望的类型，类型注释以冒号 : 开头

    function add(x: number, y: number): number {
      return x + y;
    }
  
    add('你好', 66)
  

• 这样 flow 就能检查出错误，因为我们期待的参数类型是数字。

数组

  /*@flow*/

  const arr: Array<number> = [1, 2, 3]
  arr.push('haha')

• 数组类型注释的格式是 Array<T> ，T 表示数组中每项的数据类型。

类和对象

  /*@flow*/

  const foo: ?string = null

• foo 可以为字符串，也可以为 null。