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脚本。 "scripts": {
"flow": "flow; test $? -eq 0 -o $? -eq 2",},
然后给需要flow检查的文件里加上 在根目录下运行命令： 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,tracks };
}
function setPlay(state,action) {
const { track } = action;
return { ...state,activeTrack: track };
}
运行命令check命令之后会显示错误的内容： test/track.js:10
10:exportdefaultfunction(state=initialState,action){
^^^^^parameter`state`.Missingannotation
test/track.js:10
10:exportdefaultfunction(state=initialState,action){
^^^^^^parameter`action`.Missingannotation
flow的错误提示我们，需要给出方法的参数类型。 Flow: Any类型修改代码： export default function(state: any = initialState,action: any) {
switch (action.type) {
case actionTypes.TRACKS_SET:
return setTracks(state,action);
}
return state;
}
这样修改之后就没有什么错误提示了。我们给参数指定了any类型。这个类型是所有类型的父类型，也是所有类型的子类型。所以，任何类型都可以用any代表了。但是这样并不能发挥类型检查的优势。 Flow：类型别名使用flow的类型别名可以解决上面的问题。输出的默认方法的第一个参数其实是一个State类型的实例。在本例中使用的State是一个对象，其中 type State = {
tracks: Array<any>,activeTrack: ?any
};
const initialState = {
tracks: [],activeTrack: null
};
正好之前定义的 type Track = {
//这里给出定义
}
然后 type Track = {
//这里给出定义
}
type State = {
tracks: Array<any>,activeTrack: ?Track
};
注意，这里我们用到了一个特殊的类型：Maybe Type（可能类型或者可空类型）。这个类型的定义方式就是在类型的前面放一个问号。 下面也为两个方法 // @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
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会检查出来并报错。 type Track = {
trackCode: string
};
如果在引入的actionTypes.js文件中也包含一个 type Track = {
trackCode: number
};
两个 运行flow之后就会显示出来具体的报错： test/actionTypes.js:13 13:trackCode:123 ^^^number.Thistypeisincompatiblewiththeexpectedreturntypeof 5:trackCode:string ^^^^^^string Flow: 声明类型上面的问题解决起来很简单，把两个类型的定义保持一致就可以。但是，我们不可能在任何一个需要 Flow提供了一种特殊的类型声明方式，可以一次声明到处使用。 在.flowconfig文件中的[lib]下添加如下内容。如果这个文件为空的话，运行 [libs] decls 在根目录下： mkdir decls cd decls touch flowTypes.js 在文件flowType.js中： declare type Track = {
trackCode: string;
};
把其他的 npm run flow 最后Flow对React的支持与上文所述的基本上大同小异。各位可以移步官网细看。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |