React Native填坑之旅--Flow篇(番外篇)

flow不是React Native必会的技能,但是作为正式的产品开发优势很有必要掌握的技能之一。所以,算是RN填坑之旅系列的番外篇。

Flow是一个静态的检查类型检查工具,设计之初的目的就是为了可以发现JavaScript脚本里不容易被发现的错误。在js开发的过程中,总会遇到一些问题。小的还可以,比如用alert或者console等输出一些信息可以debug,并解决。但是如果项目比较大的时候,这些手法只能起到一定的辅助作用。更有甚者,有些问题不运行到那段代码,根本不会发现错误。脸书的兄弟们就是为了解决这个问题,于是开发了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类型的一个实例。同理,大家也可以为initialStateactiveTrack定义一个类型。

type Track = {
  //这里给出定义
}

然后State类型就是这样的了:

type Track = {
  //这里给出定义
}

type State = {
  tracks: Array<any>,
  activeTrack: ?Track
};

注意,这里大家用到了一个特殊的类型:Maybe Type(可能类型或者可空类型)。这个类型的定义方式就是在类型的前面放一个问号。

下面也为两个方法setTrackssetPlay定义返回的类型,并应用到对应的方法上:

// @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

SetTrackActionPlayTrackAction可以使用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的支撑与上文所述的基本上大同小异。各位可以移步官网细看。

推荐阅读更多精彩内容