开始使用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中如果想要为一个数据添加类型
- 通过注释的方式进行添加
- 通过直接改写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
}
原著内容 转载请粘贴链接