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

为什么需要引入类型检查？ 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中配置

文章图片
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： Login.js

//@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 { render() { //test this.props.appStore.login({user:"userName",password:"123456"}) return ( ) } }

这种使用方式可以使得在调用this.props.appStore.时,webstorm能知道appStore的所有属性和方法，从而自动给出提示
2、变量为第三方类型时
以react-navigation为例：
使用：