vue项目配置使用flow类型检查的步骤

index.js:4
  4:   return x.split(‘ ‘);
                ^^^^^ property `split`. Property not found in
  4:   return x.split(‘ ‘);
              ^ Number

上述信息清楚地指出了出错位置和错误原因。我们只要将参数变成字符串，即可修正错误。该例想说明的是，因为split()方法只适用于string类型的变量，所以x应该是string，这就是类型推断。

四、空类型

Flow处理null的方式与其他类型库不同。它不会忽略null，这样可以防止了因给变量传了null而导致程序崩溃的错误。

/*@flow*/
function stringLength (str) {
 return str.length;
}
var length = stringLength(null);
　　Flow会报错。为了防止出错，我们需要单独处理null。
/*@flow*/
function stringLength (str) {
 if (str !== null) {
  return str.length;
 }
 return 0;
}
var length = stringLength(null);

代码中我们引入对null的检查，确保代码能在任何情况下都正常且正确运行。上述代码可以通过Flow的类型检查。

五、类型注释

如上所述，类型推断是Flow最有用的特性之一，不需要编写类型注释就能获取有用的反馈。但在某些特定的场景下，添加类型注释可以提供更好更明确的检查依据。考虑以下代码：

/*@flow*/
function foo(x, y){
 return x + y;
}
foo('Hello', 42);

Flow检查上述代码时检查不出任何错误，因为+即可以用在字符串上，也可以用在数字上，我们并没有明确指出add()的参数必须为数字。

在这种情况下，我们可以借助类型注释来指明期望的类型。类型注释是以冒号:开头，可以在函数参数，返回值，变量声明中使用。如果我们在上段代码中添加类型注释，就会变成如下：

/*@flow*/
function foo(x : number, y : number) : number {
 return x + y;
}
foo('Hello', 42);

现在Flow就能检查出错误，因为函数参数的期待类型为数字，而我们提供了字符串。Flow报错信息类似如下：

index.js:7
  7: foo(‘Hello’, 42);
         ^^^^^^^ string. This type is incompatible with the expected param type of
  3: function foo(x : number, y : number) : number{
                      ^^^^^^ number

如果传入的参数是数字，就不会有错误。类型注释在大型复杂的JavaScript文件中也很有用，它能保证代码按照预期进行。