入门Flow：javaScript的静态类型检查工具

前言

在上一篇我们已经了解了javaScript语言特征(类型)，了解了静态类型有不少优点，合理运用可以让我们项目更加稳定健壮。

这篇博客介绍下如何使用Flow（javaScript的静态类型检查工具）来帮助我们在javaScript开发中使用静态类型。

Flow官方文档

基本使用

安装

npm i flow-bin -D

使用flow进行类型检查

1. 在pacakge.json文件中，scripts属性中添加flow命令
   
2. 需要为flow创建一个配置文件.flowconfig

常用的配置：

书写代码，为代码添加类型

1. 通过注释的方式添加 (不会改写js代码，代码在添加完类型之后仍然可以正常运行)
2. （推荐）通过直接给数据添加类型，改写js代码，如果要正常运行，需要使用babel进行转码

语法

var 变量: 数据类型 = 数据;

执行类型检查

npm run flow

注意：

//需要flow检查的js文件需要在文件开头写入一行注释
//@flow

Flow配合babel进行使用

上面两种为代码添加类型方式我们更推荐第二种，但是这种方式会改写js代码，运行会报错，想要正常运行可以使用babel对代码进行转码处理。

安装

npm install --save-dev babel-cli babel-preset-flow

再加条命令

 "build": "babel ./src -d ./dist"
 //将src中的文件都进行处理 生成的文件到dist文件夹内

新增一个.babelrc文件，制定babel转码规则

babel转码,后就会将多余的类型检查代码去掉，能正常运行了！

npm run build

类型	说明
number	数字，NaN，Infinity类型的数据
string	字符串
null	为null类型的数据
void	相当于undefined
Array	数组类型，定义的时候需要使用Array<T>这种形式,T为指定的类型，说的是特定类型的数据组成的数据
Object	对象类型，由于对象比较自由，所以规定对象类型的时候又多种写法
any	任意类型，尽量少用
Functions	函数类型
Maybe	Maybe类型允许我们声明一个包含null和undefined两个潜在类型的值
或操作	或操作可以设置一个变量为多种可能的类型 类型1|类型2|类型3

// number类型
// number类型可以赋值的内容为： 数字、NaN、Infinity
let a: number = 100;
let b: number = NaN;
let c: number = Infinity;

// string类型
// string类型可以赋值的内容为: 字符串
let str: string = "abc";

// boolean 布尔值类型
// void  javascript中的undefined
// null  js中的null

// Array类型
// 在声明数据为数组类型的时候，我们需要为数组指定元素的类型
let arr: Array<number> = [1, 2, 3, 4];

let name: any = 123;
name = "123"

let arr1: Array<any> = [1, 'a', {}, []];

小demo
上一篇javaScript语言特征的介绍(类型)中，我们留了个坑：

我们这里可以使用Flow简化代码的处理逻辑：

function sum(arr:Array<number>){
	let result = 0;
	arr.forEach(v =>{
		result += v;
	});
	return result;
}

Flow中的函数类型

我们可以给函数的参数和返回值设置类型：

function add(num1:number,num2:number):number{
    return num1 + num2;
}
//三个:number依次为参数1，参数2，返回值设置为number

可以将变量声明为函数类型：

let f1 :(a:number,a:number)=>number = add;
//意为：f1变量类型为函数类型，且函数的参数两个，都为数字类型，返回值也是数字类型。
//常用于规范callback函数

Maybe类型的说明

Maybe类型相当于给数据添加了两个null和undefined类型。

//需求：函数传入一个数字类型的参数，若有传入return参数，若没有则return 0；
let test = function(a:number) {
    a = a || 0;
    return a;
};
test(2);//正常
test();//出现报错，因为flow类型检查它没传入参数，异常

为了完成需求可以使用Maybe类型帮助我们

// ?number 代表这个参数可以为number null undefined三种类型
let test = function(a:?number) {
    a = a || 0;
    return a;
};
test(2);//正常
test();//正常

Flow中类型的或操作

//代表a变量可以为number类型也可以为string类型
let a: number|string = '1';
a = 1;

Flow中对象类型

同样在上一篇javaScript语言特征的介绍(类型)中，我们还留了个坑：

function f2(obj){
	obj.sing();
}
var o ={
	name:'周杰伦',
	play:function(){console.log('lol')}
}
f2(o);//报错 只有在代码执行时才会报错

我们可以用flow对这段代码进行处理

//意为：参数是一个对象类型，并且对象中有一个sing属性，sing是一个函数，他的参数为undefined，返回值也是undefined
function f2(obj:{sing:()=>void}){
    obj.sing();
}

let o = {
    name: '周杰伦',
    play: function () {
        console.log('lol')
    }
};
f2(o);

小结

Flow能够给JavaScript提供静态类型检查的能力，其实就是为javascript添加了一个编译过程。
安装Flow

npm i flow-bin -D

需要编写Flow代码

• 通过注释的方式为代码添加类型 （不会对js代码产生任何更改，影响）
• 通过直接在js代码中书写类型 （改变了js代码的结构，需要通过babel进行转码之后，才能够正常的运行）

// 文件中需要添加一个标记 告诉flow当前文件需要进行类型检查！
// @flow 

var 变量 /*: 类型*/ = 数据

var 变量: 类型 = 数据

如果使用的是第二种方式，则需要配合babel使用

npm install babel-cli babel-preset-flow -D

通过babel进行转码之后，代码就可以正常运行