为什么需要引入类型检查？
JS作为一个弱类型语言，一个著名的黑点是它很容易就写出非常隐蔽的隐患代码，在编译期甚至运行时看上去都不会报错，但是可能会发生各种各样奇怪的和难以解决的bug。
所谓类型检查，就是在编译期尽早发现（由类型错误引起的）bug，又不影响代码运行（不需要运行时动态检查类型），使编写js具有和编写Java等强类型语言相近的体验。它可以：
1、使得大型项目可维护
2、增加代码的可读性
3、通常会有更好的IDE支持
什么是Flow
Flow是一个由Facebook出品的JavaScript静态类型检查工具，它与Typescript不同的是，它可以部分引入，不需要完全重构整个项目（需要进行类型检查的文件加上//@flow 注释），所以对于一个已有一定规模的项目来说，迁移成本更小，也更加可行。除此之外，Flow可以提供实时增量的反馈，通过运行Flow server不需要在每次更改项目的时候完全从头运行类型检查，提高运行效率
基本形式
// @flow
function square(n:number):number{
return n*n;
}
square("2");// Error!
安装与配置
安装
yarn add --dev flow-bin //最好安装项目文件.flowconfig中要求的版本
运行检查
yarn flow
安装flow-type（导入第三方类型的工具)
yarn add --dev flow-type
运行flow-typed
yarn flow-typed install module_name
webstorm中配置
image
配置好之后在所有有//@flow注释的文件都会进行监视
.flowconfig修改
在[options]里加上
esproposal.decorators=ignore //忽略装饰符
module.system.node.resolve_dirname=./src //允许在src里查找模块
module.system.node.resolve_dirname=node_modules
在React的应用：
1、mobx的最佳实践
定义store：
AppStore.js
//@flow
import { observable, action, runInAction, configure }from 'mobx'
class appStore {
@observable
isLoading: boolean =false
@loading
@action
async login(user: {userName: string, password: string }) {
const {accessToken, userId } =await TokenAuthService.authenticate({
model: {
userNameOrEmailAddress: user.userName,
password: user.password
}
})
await setStorageValue('Authorization', accessToken)
return userId
}
}
export default appStore
使用Store：
Login.js
//@flow
import React, {Component }from 'react'
import {StyleSheet, View }from 'react-native'
import type AppStore from '../../store/AppStore'
type Props = {
appStore: AppStore
}
class App extends Component <Props>{
render() {
//test
this.props.appStore.login({user:"userName",password:"123456"})
return (
<View></View>
)
}
}
这种使用方式可以使得在调用this.props.appStore.时,webstorm能知道appStore的所有属性和方法，从而自动给出提示
2、变量为第三方类型时
以react-navigation为例：
使用：
yarn flow-typed install react-navigation
自动生成flow-typed文件夹，在npm子文件夹里创建了一个类型文件react-navigation_v2.x.x.js，里面是react-navigation一些方法属性的声明，调用的时候：
import type {NavigationScreenProp} from 'react-navigation'
之后
type Props{
navigation :NavigationScreenProp<*>
}
调用
const {push}=this.props.navigation
push&&push('otherScreen')
注意push(),pop()等等这些方法如果不写undefine判断，flow会报错，因为在type文件里这些方法是有加问号？的，表明可以为undefine，flow为了防止调用未定义的方法所以报错
