Flow初识

Posted on | In

借助学习vue.js源码，在其过程中，认识到了Flow，该篇主要介绍一下最基本的Flow

初识Flow

1. 是什么？

Flow是一种静态类型检查工具，是一种工具。

静态类型检查： 在编辑期间尽早发现（由类型引起的）bug，又不影响代码运行（不需要运行时动态检查类型）

2. Flow的工作方式

2.1 类型推断

通过变量使用上下文来推断出变量类型，然后根据这些推断来检查类型

1
2
3
4
5
/*@flow*/``
function split(str) {
  return str.split(' ')
}
split(11)

会报错：原因是我们期待的是字符串类型，但是传入的是数字类型

2.2 类型注释

事先注释好我们期待的类型，Flow会基于这些注释来判断

1
2
3
4
5
6
/*@flow*/

function add(x, y){
  return x + y
}
add('Hello', 11)

上面的代码不会报错，Flow的检查不出来，因为‘+’可以用于字符串也可以用于数字
则，此时就需要使用类型注释（：）

1
2
3
4
5
6
7
/*@flow*/

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

add('Hello', 11)
  • 数组类型注释格式：Array< T >，T 表示数组中每项的数据类型
  • 一个变量可能多个类型时，可以使用 ‘|’ 来连接两种类型，表示或
  • 若想任意类型 T 可以为 null 或者 undefined，只需类似如下写成可以使用 ?T 的格式即可

参考：Flow官网