Flow
基本类型的类型标注语法
-
JavaScript 中的基本类型，类型标注语法是在变量后加上一个冒号，空格，然后是相应的类型名称
-
undefined 的类型是 void； null 的类型是 null；string 类型、number 类型和 boolean 类型，其类型名称都是小写开头
const a: string = 'a'; // 字面量值对应的类型名称是小写 const b: string = String('b'); // String 函数是将参数转化成一个字符串，仍然是小写的 string 类型 const c: String = new String(‘c’); // 大写开头的类型名称，其对应的值是 new 创建出来的类型实例； -
字面量值也可以作为一种类型，符合这种类型的变量只有这个字面量本身
// @flow
let monthsAYear: 12 = 12;
monthsAYear = 13; // Flow 会在这里报错
函数类型标注方法
// 函数声明
function getLength(str: string): number {
return str.length;
}
// 函数表达式
const greeting = function(welcome: string): void{
console.log(welcome);
}
// 箭头函数
const addNumber = (a: number, b: number): number => (a + b);
数组类型
const names: Array<string> = ['a', 'b', 'c'];
// 或者
const ages: number[] = [1, 2, 3, 4];
元祖类型
// 这样标注后，每项类型及数组长度不再允许改变，push，pop等操作亦不允许
const recordItem : [number, string, boolean] = [1, 'First', true];
对象类型(type)
type 是 Flow 中的关键字，用来定义自定义的类型，并且可以在后面的类型标注中使用。例如：
// eg1:
type StringType = string;
const name: StringType = ‘zhihu’;
// eg2:
type TupleType = [ number, string ]
const record: TupleType = [ 1, 'a']
//eg3:
type BorderConfigType = {
width: number,
color: string,
hasShadow: boolean
}
const borderConfig : BorderConfigType = {
width: 10,
color: 'red',
hasShadow: true,
}
联结类型（Union Type）
将两个或两个以上的类型，通过 | 符号进行联结，可以构成一个联结类型；假如有：
// 表示类型为 C 的变量既可以是 A 类型值，又可以是 B 类型值
type C = A | B;
例如：由于项目年久失修，其中有一个字段 user_id，有的地方取值是字符串，有的是数字类型，我们要给这种类型加上标注就适合用组合类型：
// @flow
type UserIdType = string | number;
let user_id : UserIdType = 12345678;
user_id = '87654321';
类型的细化：
如果是定义函数的参数是一个联结类型，需要在函数的内部针对每种类型都作出判断并进行相应处理；这个过程称为类型的细化。
// @flow
type MsgType = string | number;
function show(msg: MsgType) {
if (typeof msg === 'string' ){
// do something
} else {
// 在这个代码块里，可以放心将参数 msg 当成数字类型
// Flow 也会作出这样的推理
}
}
交叉类型（Intersection Type）的使用
将两个或两个以上的类型，通过 & 符号并列写在一起，可以构成一个交叉类型；比如：
// 定义为类型 C 的变量，其取值必须满足 A 类型约束，又满足 B 类型约束
type C = A & B;
// eg1:
// X3 就是一个交叉类型。类型为 X3 的变量，其取值必须受 X1 类型约束，
// 又受 X2 的类型约束，所以取值只可能是 3 或者 4 或者 5；
type X1 = 1 | 2 | 3 | 4 | 5
type X2 = 3 | 4 | 5 | 6 | 7
type X3 = X1 & X2;
//eg2:
// Y3必须是对象类型，且有name,age,malename,age,male属性
type Y1 = {
name: string,
male: boolean
}
type Y2 = {
name: string,
age: number
}
type Y3 = Y1 & Y2;
对象的可选属性与变量的可选类型(?: 与 :?)
这是两个容易弄混的概念；
// @flow
type Test = {
key1: ?string,
key2?: number,
}
在上面的例子中，我们定义了一个 Test 类型；注意它的两个属性后都有个问号，且问号的位置不一样：
:?
- 表示 Test 类型中，必须有 key1 属性，但是属性值不一定的 string，还可以是 null 或者 undefined；
- 从另一个角度讲，只要 key1 值不是 null 和 undefined，就必须是 string 类型。
- 这是 Flow 中 Maybe Type。在对这种类型的变量进行细化的过程中，也必须手工验证值是否为 null 和 undefined。
// @flow
function myFn(t: Test) {
if (t.key1 !== null && t.key1 !== undefined ) {
// 在这里，可以放心的将 t.key1 作为字符串类型进行操作
console.log(t.key1.slice(0,t.key1.length))
}
}
?:
- 表示 Test 类型中，可以没有 key2 属性，但是如果出现了 key2 属性，属性值必须是一个 number 类型。
- 如果允许没有 key2 属性，在 JavaScript 中，访问对象的某个不存在的属性，会返回 undefined；所以对象的可选属性，其属性值要么是指定的类型（如上例中的 number），要么就是 undefined，不能是 null。
any 类型
Flow 提供一个 any 类型；给变量标注为 any 类型后，如你预期的一样，这个变量可以是任意值；基本上相当于告诉 Flow：这个变量的类型我有把握，你不用管。在将 Flow 渐进的应用到你的项目中时，可能 Flow 针对某些变量的报错是不需要处理的，你可以标注为这种类型消除错误。
// @flow
let a: any = 1;
a = 'a';
a = { };
