js编程存在的问题
-
js弱类型的动态类型检查语言
弱类型: 被声明时可以赋值为任何数据
动态类型: 类型检查会在运行时进行, 静态则会在编译时进行
带来的问题, 代码中的错误只能在运行时才被发现(测试可能都没办法发现)
Flow(谷歌)
作用: javascript类型检查
-
使用步骤
安装flow,
npm init -y->cnpm i flow-bin -Dpackage.json中增加执行指令,
"flow": "flow"-
初始化flow配置文件,
npm run flow init[ignore]: 忽略检测类型的文件[include]: 需要检测类型的文件 -
在项目中使用
- 通过注释(不推荐)
// @flow注释之后的内容才能被flow检测
/*: number */在需要检测的内容这样注释, 说明其中类型// @flow let a /*: number */ = 3; a = 'cc' console.log(a)- 直接改写js结构(需要babel, 类似ts语法了)
安装bebel,
cnpm i babel-cli babel-preset-flow -D创建
.babelrc文件,
{ "presets": [ "flow" ] }package.json文件中添加
"build": "babel ./src -d ./dist"npm run build通过babel把新增加的: number去除掉, 方便转码上线(与下面的指令区分开来)
// @flow let a: number = 3; a = 'abc'; console.log(a);npm run flow还是会检测数据类型执行
npm run flow, 检测js内容
-
Flow中的数据类型
number类型可以赋值的类型: 数值, NaN, Infinity `let a: number = NaN` string类型 Boolean类型 void类型: 就是js中的undefined null Array类型 `let arr: Array<number> = []`, 需要指定array的元素类型 any类型, `let test: any = 任意数据` Flow的函数类型
// 声明一个函数类型, 函数参数声明类型, 返回值也要声明类型
// @flow
const sum = (arr: Array<number>): number => {
let result = 0;
arr.forEach(item => {
result += item;
});
return result;
};
// 当声明一个函数变量时, 说明这个变量是函数, 参数两个为数字, 返回值为数字
let temp = (a: number, b:number) => number;
// 最常见的ajax, 参数是函数时, 同时箭头后面代表返回值类型,// 不写默认是undefined
const ajax = (callback: (data: Object) => void) {
}
- Maybe类型
// 问号代表可以是null或者undefined, 函数没有声明返回值, 即返回值也可以是undefined
// @ flow
const test = (a: ?number) {
console.log(a)
}
- 类型的或操作
// 就是或操作, 两者类型选择一个
// @flow
let a = number|striing = 10;
a = 'abc'
- 对象类型
// @flow
const ajax = (option: { url:string, type: string, success:(data: Object) => void }) {
}
ajax()// 报错, 因为函数参数是对象
总结: 给js提供了静态检测的能力, 入门篇, 感觉跟TypeScripet很相似
