为什么需要引入类型检查？

JS作为一个弱类型语言，一个著名的黑点是它很容易就写出非常隐蔽的隐患代码，在编译期甚至运行时看上去都不会报错，但是可能会发生各种各样奇怪的和难以解决的bug。

所谓类型检查，就是在编译期尽早发现（由类型错误引起的）bug，又不影响代码运行（不需要运行时动态检查类型），使编写js具有和编写Java等强类型语言相近的体验。它可以：

1、使得大型项目可维护

2、增加代码的可读性

3、通常会有更好的IDE支持

什么是Flow

Flow是一个由Facebook出品的JavaScript静态类型检查工具，它与Typescript不同的是，它可以部分引入，不需要完全重构整个项目（需要进行类型检查的文件加上//@flow 注释），所以对于一个已有一定规模的项目来说，迁移成本更小，也更加可行。除此之外，Flow可以提供实时增量的反馈，通过运行Flow server不需要在每次更改项目的时候完全从头运行类型检查，提高运行效率

基本形式

// @flowfunction 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中配置

webp

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

//@flowimport { 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：

//@flowimport 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为了防止调用未定义的方法所以报错

作者：一只路过的小学生
链接：https://www.jianshu.com/p/ad59838c2a7d

Flow类型检查在React项目中的应用