转载：https://segmentfault.com/a/1190000006983211
在小心翼翼维护项目代码的时候经常会看到这种代码
function main(){
//fn1函数获取了一个数据
var object = fn1()
//fn2根据获数据，产生一个结果
var result = fn2(object)
return result
}
很明显，这个过程非常的‘黑’，如果你想知道object包含什么数据的话，可以
-
打印一下 console.log(object)
-
查看fn1的注释，并且保佑它的注释是正确，全面的
-
或结合1，2，然后仔细查看fn1的源码，希望它不是很复杂
被上述步骤折磨完之后，终于能真正的写点代码了，但是依旧得非常小心，因为这里还有另一个函数：fn2。
在修改代码的时候，得保证result这个结果没有被影响，那么如何保证呢？
很简单，重复上面的步骤，搞清楚result包含的数据，在测试的时候确保其数据跟原先的相同。
…
是时候彻底优化这个烦人的问题了。
引入类型系统
其实问题的根源就是因为javascript太灵活了，在代码运行期间几乎可以做任何的修改，
没有东西可以在代码运行前就保证 某个变量，某个函数 跟预期的一致。
所以要加入类型系统来确保代码的可靠性，在后期维护的时候同样能够传达出有效的信息。
facebook出品的flow.js 做的就是这种事情。
使用flow.js
git 仓库：https://github.com/facebook/flow
flow 官方文档：https://flowtype.org/docs/qui...
方便体验，这里有一个搭好的case集合
git clone [email protected]:JavascriptTips/flow-examples.git
基础类型检测
flow.js 中定义了的5种最简单的类型,（warning：都是小写），其中void对应js中的undefined
-
boolean
-
number
-
string
-
null
-
void
要想加入到javascript中，只需要在关键的地方声明想要的类型。其它时间我们的代码还是熟悉的javascript，代码如下（flow-examples工程中也有对应js文件）：
//flow-examples/src/primitives.js
//在文件的头部加入,用注释加入 `@flow` 声明，这样flow.js才会检查这个文件。
//@flow
//在声明变量时，在变量名加入 `:[Type]` 来表明变量的类型,其它类型同理。
//这个语法非常像flash的ActionScript，咦？好像暴露了什么。
var num:number = 1;
var str:string = 'a';
//当然，也可以不加类型，这样就跟原来的js一样了。
var variable = 'zz';复杂类型检测
主要有：
-
Object
-
Array
-
函数
-
自定义Class
这几个类型比较复杂，而且可以相互嵌套。在flow.js中这几种类型有非常多的检查语法，在这里简单的展示几项，具体见代码代码和官方文档。
对象：Object
//flow-examples/src/object.js
//@flow
//Object大写的O
var o:Object = {
hello:'h'
};
//声明了Object的key
var o2:{key:string} = {
key:'z233'
};
数组：Array
//flow-examples/src/array.js
//@flow
//基于基本类似的数组，数组内都是相同类型
var numberArr:number[] = [12,3,4,5,2];
//另一个写法
var numberAr2r:Array<number> = [12,3,2,3];
var stringArr:string[] = ['12','a','cc'];
var booleanArr:boolean[] = [true,true,false];
var nullArr:null[] = [null,null,null];
var voidArr:void[] = [ , , undefined,void(0)];
//数组内包含各个不同的类型数据
//第4个原素没有声明，则可以是任意类型
var arr:[number,string,boolean] = [1,'a',true,function(){},];函数
函数比较特殊，因为函数的核心在于参数和返回值，函数作文类型本身并没有作用。
//flow-examples/src/function.js
//@flow
/**
* 声明带类型的函数
* 这里是声明一个函数fn，规定了自己需要的参数类型和返回值类型。
*/
function fn(arg:number,arg2:string):Object{
return {
arg,
arg2
}
}
//同理，ES2015箭头函数的写法
var fn2 = (arg:number,arg2:string):Object => {
return {
arg,
arg2
}
}
/**
* 这里是声明变量fn2，规定了它所需的函数的特征:
* 参数： (arg:string,arg2:number)
* 返回值：Object
*/
var fn3:(arg:string,arg2:number)=>Object = function(){
return {}
}
/**
* 对比下面这种写法,
* 两者的声明的地方不一样，造成的意义也不同。
*/
var fn4 = function(arg:string,arg2:Object):number{
return 1;
}
自定义的class
声明一个自定义类，然后用法如同基本类型
//flow-examples/src/class.js
//@flow
class MyClass{
name:string;
constructor(n){
this.name = n;
}
}
var myClass : MyClass = new MyClass('abc');引入flow.js
可以看到加入flow.js语法后，正常的js引擎肯定是不能跑的。
这时就要借助万能的babel编译这些js。
1.如果是正经的带webpack + babel 的前端项目,可以无缝集成，加入babel插件即可：
babel-plugin-transform-flow-strip-types
2.如果只是跑一下测试这些js，可以直接在flow-examples工程中，如下：
npm run fnode src/object.js
其它跑起来的方法，可以在官方文档查看
结论
这里只是介绍了flow.js一部分的特性，在引入flow.js之后，js只需要很小的改动就能得到增强，在关键的地方确保逻辑的准确性。
更进一步，再结合js的函数式编程特性，以类型和函数驱动开发，感觉很cool.
一点微小的疑问
这里2个小问题，
为什么是flow.js 而不是其它编译到js的强类型语言，如TypeScript ?
答：我非常喜欢js的灵活性，它为编程带来极大便捷。而且flow.js对工程的侵入性很小，无需大量的额外工作就能使用起来。
为什么不加强注释，完善注释，而是再加入一个工具？
答：因为写注释很烦，并且有无注释不会影响代码执行。flow.js则是一种基本保障，确保检查无误才能运行。