React Native填坑之旅--Flow篇，番外 - Mr 布鲁斯
React Native填坑之旅--Flow篇（番外）
flow不是React Native必会的技能，但是作为正式的产品开发优势很有必要掌握的技能之一。所以，算是RN填坑之旅系列的番外篇。
Flow是一个静态的检查类型检查工具，设计之初的目的就是为了可以发现JavaScript脚本里不容易被发现的错误。在js开发的过程中，总会遇到一些问题。小的还可以，比如用alert或者console等输出一些信息可以debug，并解决。但是如果项目比较大的时候，这些手法只能起到一定的辅助作用。更有甚者，有些问题不运行到那段代码，根本不会发现错误。Facebook的兄弟们就是为了解决这个问题，于是开发了flow。
首先，跳转的你的项目目录下。然后就开始正文了。
安装&配置
Flow就从安装开始。
npm install --save-dev flow-bin
创建配置文件。
touch .flowconfig
先不管空白的.flowconfig配置文件。在package.json文件里flow脚本。
your project/package.json
"scripts": {
"flow": "flow; test $? -eq 0 -o $? -eq 2",
},
然后给需要flow检查的文件里加上//@flow或者/*@flow*/。然后就可以检查了。（也可以在命令中加上--all， 这样就会检查所有文件）。
在根目录下运行命令：
npm run flow
用Flow检查
现在就把flow用起来。Flow绝不是上面几个命令而已，而是一套类型体系。下面通过一个例子来了解一下flow和flow的类型体系。
export default function(state = initialState, action) {
switch (action.type) {
case actionTypes.TRACKS_SET:
return setTracks(state, action);
case actionTypes.TRACK_PLAY:
return setPlay(state, action);
}
return state;
}
function setTracks(state, action) {
const { tracks } = action;
return { ...state, tracks };
}
第一次检查会出很多的错，因为上面的写法没有按照flow的定义添加类型声明。下面来添加类型声明。
// @flow
import * as actionTypes from \'./actionTypes\';
const initialState = {
tracks: [],
activeTrack: null
};
export default function(state = initialState, action) {
switch (action.type) {
case actionTypes.TRACKS_SET:
return setTracks(state, action);
case actionTypes.TRACK_PLAY:
return setPlay(state, action);
}
return state;
}
function setTracks(state, action) {
const { tracks } = action;
return { ...state, tracks };
}
function setPlay(state, action) {
const { track } = action;
return { ...state, activeTrack: track };
}
运行命令check命令之后会显示错误的内容：
test/track.js:10
10: export default function(state = initialState, action) {
^^^^^ parameter `state`. Missing annotation
test/track.js:10
10: export default function(state = initialState, action) {
^^^^^^ parameter `action`. Missing annotation
flow的错误提示我们，需要给出方法的参数类型。
Flow: Any类型
修改代码：
export default function(state: any = initialState, action: any) {
switch (action.type) {
case actionTypes.TRACKS_SET:
return setTracks(state, action);
case actionTypes.TRACK_PLAY:
return setPlay(state, action);
}
return state;
}
这样修改之后就没有什么错误提示了。我们给参数指定了any类型。这个类型是所有类型的父类型，也是所有类型的子类型。所以，任何类型都可以用any代表了。但是这样并不能发挥类型检查的优势。
Flow：类型别名
使用flow的类型别名可以解决上面的问题。输出的默认方法的第一个参数其实是一个State类型的实例。在本例中使用的State是一个对象，其中tracks是一个数组，activeTrack是一个可以为空的对象。为State定义一个类型别名：
type State = {
tracks: Array<any>,
activeTrack: ?any
};
const initialState = {
tracks: [],
activeTrack: null
};
正好之前定义的initialState就是State类型的一个实例。同理，我们也可以为initialState的activeTrack定义一个类型。
type Track = {
//这里给出定义
}
然后State类型就是这样的了：
type Track = {
//这里给出定义
}
type State = {
tracks: Array<any>,
activeTrack: ?Track
};
注意，这里我们用到了一个特殊的类型：Maybe Type（可能类型或者可空类型）。这个类型的定义方式就是在类型的前面放一个问号。
下面也为两个方法setTracks和setPlay定义返回的类型，并应用到对应的方法上：
// @flow
import * as actionTypes from \'./actionTypes\';
type Track = {
trackName: string
};
type State = {
tracks: Array<any>,
activeTrack: ?Track
};
type SetTrackAction = {
type: string,
tracks: Array<Track>
};
type PlayTrackAction = {
type: string,
track: Track
};
const initialState = {
tracks: [],
activeTrack: null
};
export function setTracks(tracks: Array<Track>): SetTrackAction {
return {
type: actionTypes.TRACKS_SET,
tracks
};
}
export function setPlay(track: Track): PlayTrackAction {
return {
type: actionTypes.TRACK_PLAY,
track: track
};
}
Flow: Type Union
SetTrackAction和PlayTrackAction可以使用Type Union的方式统一起来：
type Action = SetTrackAction | PlayTrackAction;
修改代码：
export function setTracks(tracks: Array<Track>): Action {
return {
type: actionTypes.TRACKS_SET,
tracks
};
}
export function setPlay(track: Track): Action {
return {
type: actionTypes.TRACK_PLAY,
track: track
};
}
Flow: 模块处理
这里主要说明一种情况。如果引入的另外一个模块和本模块定义了一个同名的类型别名，但是里面包含的内容不同，那么Flow会检查出来并报错。
比如，现在我们的模块里有了Track这个类型，是这样的：
type Track = {
trackCode: string
};
如果在引入的actionTypes.js文件中也包含一个Track类型，但是定义的有些不同：
type Track = {
trackCode: number
};
两个Track的不同就在于trackCode的类型，一个是string，一个是number。
运行flow之后就会显示出来具体的报错：
test/actionTypes.js:13
13: trackCode: 123
^^^ number. This type is incompatible with the expected return type of
5: trackCode: string
^^^^^^ string
Flow: 声明类型
上面的问题解决起来很简单，把两个类型的定义保持一致就可以。但是，我们不可能在任何一个需要Track类型的文件中都定义一个一模一样的类型。
Flow提供了一种特殊的类型声明方式，可以一次声明到处使用。
在.flowconfig文件中的[lib]下添加如下内容。如果这个文件为空的话，运行flow init命令。
[libs]
decls
在根目录下：
mkdir decls
cd decls
touch flowTypes.js
在文件flowType.js中：
declare type Track = {
trackCode: string;
};
把其他的Track类型声明全部都删掉，然后运行命令：
npm run flow
最后
Flow对React的支持与上文所述的基本上大同小异。各位可以移步官网细看。