快速上手 Flow 静态类型检查器

发表于 | 更新于: | 分类于 |
字数统计: 1,063 | 阅读时长 ≈ 4

快速上手 Flow 静态类型检查器

why Flow

javascript是一个弱类型语言，变量类型不需要声明，运算过程中会根据需要自动转换类型，这个是js的优点，够灵活，编码简单，但是同时也是软肋。有时候，有些类型转换的bug无从查起，特别是在复杂的应用中。

Flow为Javascript添加了静态类型检查，以提高开发效率和代码质量。更明确的说，静态类型检查提供的好处像早期错误检查，帮助你发现一些只有在运行时才能发现的错误。

安装

由于flow是用OCaml语言写的，npm上只有对应的二进制包。

npm install flow-bin

可者使用 Homebrew 安装

brew install flow

快速上手

在项目目录下执行 flow init，会生成一个 .flowconfig 文件 只需要在待检查的js文件头部添加一行注释

/* @flow */

然后在同一目录下运行flow check即可。

flow server

flow server是为了提高检测效率的后台程序，支持在后台运行，并且只监测有修改的文件。

方法很简单，一条 flow 命令就能完成 Flow 服务器启动，文件检测，被更改文件的检测，即第一次使用 flow 命令会启动 Flow 服务器并且首次检测文件，再次使用 flow 命令会连接 Flow 服务器并且检测文件，之后使用 flow 命令时将会连接 Flow 服务器并且对修改过的文件进行检测。

  • flow check:检测所有声明了 @flow 的文件
  • flow check –all:可以让Flow检测所有文件，包括没有声明 @flow 的文件
  • flow stop:项目开发完成停止服务

flowconfig

  • [ignore]忽略的文件，路径的匹配规则是正则表达式
  • [include]需要检测的其他目录的文件
  • [libs]当文件中有第三方库引用或者require全局的module时，需要在一个单独的文件里declare这个对象，这个的值是所有declare路径的集合
  • [options]包含若干key-value的配置

flow的两种模式

/* @flow */ 只要带有这个注释，都会进行类型检测
/* @flow weak */ 只对有加类型声明的变量进行类型检测

类型声明/标注

不声明变量类型的时候，Flow 也会自动检查隐性存在的类型转换。但更为严谨的方式是显式声明变量的类型。

可以在代码里写上类型:

/* @flow */

// Changing the return type to number fixes the error
function foo(x: string, y: number): number {
  return x.length * y;
}

foo('Hello', 42);

也可以这样：

/* @flow */
type T = number;
var x: T = 0;

下面是一个更详细的例子：

class People {
    name: string;
    constructor(name:string){
        this.name = name
    }
    getAge():number{
        return 18;
    }
}

function getLength(param?:string):number {
    /*param?:string传参类型什么，?表示此处可不传值；*/
    /*\:number为函数返回值类型,如果没有return可不写或写void*/
    var s:string = 'string';/*字符*/
    var ss:String = new String('string');/*字符对象*/

    /* s = ss*///类型不同，flow会报错

    var n:number = 12;/*数字*/
    var nn:Number = new Number(12);/*数字对象*/

    var b:boolean = true;/*bool值，仅能为true/false*/
    var bb:Boolean = new Boolean(true);/*bool值对象*/

    var o:{prop1:number,prop2:string} = {
        /*对象熟悉声明*/
        prop1: 12,
        prop2: '21123'
    }

    var v:void = undefined;/*undefined*/
    var a:any = 'aa';/*任意类型，除undefined*/
    var m:mixed = '1';/*任意类型+undefined*/
    var mm:mixed = undefined;/*任意类型+undefined*/

    var aa:Array = [1,2,3,4];/*数组内值类型声明*/

    var P:Class = People;/*自定义类型声明*/
    var p:People = new People('pt');/*自定义People类型*/

    if (param) {
        return param.length;
    } else {
        return 0;
    }
}

兼容性

Flow致力于支持最新的JavaScript标准。目前已经支持各种ES6特性如destructuring, classes, extended objects, optional function parameters，以及核心API扩展（比如Map, Set, Promise, 和 new methods on Object, Array, 和 Math)。其它特性（尤其是模块）正在开发中。Flow支持CommonJS / Node.js 规范的模块。

Flow 也已经支持 React。

代码编译

在构建工具中添加flow检查的步骤。webpack和gulp都有对应的flow插件。

我们在项目中用到的插件： eslint-plugin-flow-vars

参考

Flow官网最近访问不了，可以看这里：https://github.com/facebook/flow/tree/master/website/docs flow——A static type checker for javascript #32 flow–facebook出品的javascript静态类型检查器

0%