初探 Flow 类型检查（2）

开始使用Flow

接上篇
若用npm 请参考官网执行命令 https://flow.org/

npm init -y
yarn add --dev flow-bin

package.json文件中添加flow命令

然后执行命令 以下命令之一，新增了.flowconfig的文件

npm run flow init
yarn run flow init

在flow中如果想要为一个数据添加类型

1. 通过注释的方式进行添加
2. 通过直接改写js代码解构（推荐）

第一种 @flow 为标记，文件中必写，运行yarn run flow

// @flow
var a /* :number */= 10
a = 'abc'

console.log(a);

第二种

// @flow
var a:（一个空格）number = 10
a = 'abc'

console.log(a);

运行 yarn run flow
这是会有报错信息如下，这样我们无需运行代码，执行命令则可以检查错误

第一种方式 可直接运行代码，但是代码中写注释稍显不规范，并且有些累
第二种方式 运行时会报错，解决办法如下图

第二个红色框 新建.babelrc文件来书写
执行yarn run build ，src文件夹下文件 会新建并打包至lib文件下，这时发现lib文件夹下的文件内容，是正常的代码了，没有flow的内容了

number类型可赋值：数字，NaN，Infinity
void ： undefined
null ： null
any ：any 任何类型
Maybe： ? 代表为undefined或null
number | string : 数字类型或字符串类型
Array：

let arr: Array = [] //在声明数据为数组类型时，要为数组声明成员类型
let arr: Array = [‘a’,1,‘2’] //数组的任何类型

应用：

function sum(arr) {   
	//非必要代码
	if (!arr) throw new Error('函数需要传参')
	if (!Array.isArray(arr)) throw new Error('函数需要一个数组作为参数')
	if (!arr.every(v => typeof v === 'number')) throw new Error('函数需要的数组为数字数组！')
	//非必要代码结束
	
	let result = 0
	arr.forEach(v => {
		result += v
	})
	return result
}

更改后的代码
function sum(arr: Array<number>) {   
	
	let result = 0
	arr.forEach(v => {
		result += v
	})
	return result
}

原著内容 转载请粘贴链接