遇见flowtype

[hufeng]

我听见寂寞在唱歌，静静地，静静地。

背景

最近花了很多的精力推进flow在项目中的使用，最早知道flow是react-native创建的项目里面看见了.flowconfig 和 @flow标记。

why flow?

首先就是几点疑问：

1. flow是什么？
2. 为什么我们需要flow呢？
3. flow可以给我们带来哪些特性？

flow是什么就像官方文档解释的，flow是javascript的静态类型的检测器。众所周知，javascript是动态类型的语言，带来的好处是容易上手，代码非常灵活。但是问题是这种灵活性可能会给代码的可读性和可维护性带来很大的挑战，对于大型的js项目更是一个非常大的考验。怎么去解决这个问题呢？目前看静态的类型检查是一个很好的办法。如typescript，或者flow尝试做的事情。

flow有哪些特性呢？

1. 可以对于开启flow检测js源码，进行类型推断，检查出js中一些不合理的地方。
2. flow对常用的js的习语都会智能的识别。(实际上，这块还有待加强，太动态的代码仍热识别不出来) 3.因为有了类型的检查，就可以带来更好的js的代码的提示，这种提示可以很好的做到语义级别。

比如:

方法的提示跟着上下午的语义zuo'l做了很好的区分。 非常👍。

getting started

怎么开始flow的旅程呢？

创建项目：

mkdir hello && cd hello
yarn init --yes && flow init

这样就初始化了一个flow的基础项目，在hello的目录下有个因此的flow的配置文件就是.flowconfig

[ignore]

[include]

[libs]

[options]

我们的源码的js文件需要添加 //@flow flow就会检测该文件 如：

//@flow

function add(x, y) {
  return x + y;
}

add(1, 2);    //3
add(1, '2'); // 12

如果没有加类型的annotation，flow推到出x的类型是number，y的类型是string | number, 返回值：string | number.

add(1, '2') 这种可能常常不是我们期待的结果，我们希望检测这种错误，那我们就可以添加类型的标记。

//@flow

function add(x: number, y: number) {
  return x + y;
}

add(1, 2);    //3
add(1, '2'); // 12

这个时候flow就会告诉我们这里面有类型的错误。

常用的类型标记

js的基本数据类型：

boolean

let isValid: boolean = true;

function checkLogin(): boolean {
}

number

let x: number = 1;
let y: number = 434.00;

function add(a: number, y: number): number {
 return x + y;
}

string

let name: string = "flow"

("foo": string) //ok
("foo": String) // error
(new String("Foo"), String) //yes

null && void 对于javascript中的null和undefined，flow谨慎对待，flow独立认为null是类型，void是undefined的类型。细细想想这会带来哪些好处？:) 当然是更好的静态检查，不认为是值，如果把null付给了string或者undefined就会报类型错误。

(null: null) //yes
(null: void) //nope
(undefined: void) //yes
(undefined: null) //nope