javascript是一门弱类型语言, 所谓弱类型, 就是一个变量既可以被赋值字符串
, 数字
, 又可以被赋值数组
, 对象
, 弱类型的好处很多, 但也有缺点, 比如:
Facebook开发了一个名为
Flow
的框架, 为javascript添加了编译的过程, 可以让我们用类似java的强类型风格
, 编写js语言, 使用方法非常简单, 以下是flow的一些使用实例
// 新建一个文件夹
mkdir learn-flow
// 进入文件夹
cd learn-flow
// 初始化项目
npm init -y
npm install flow-bin
package.json
中添加启动脚本 "scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"flow": "flow"
},
.flowconfig
npm run flow init
var userName = "zhaoolee";
var userAge = 22;
learn-flow
中新建一个user.js
文件//@flow
var userName /*: string*/ = "zhaoolee";
var userAge /*: number*/ = 18;
注意点: 需要在文件首部添加
//@flow标记
, 否则无法进行类型检测
npm run flow
如果声明与赋值的类型不匹配,则会产生报错信息
//@flow
var num1 /*: number*/ = 100;
var num2 /*: number*/ = NaN;
var num3 /*: number*/ = Infinity;
//@flow
var name /*: string*/ = "zhaoolee";
null
, ,写法如下//@flow
var likePython /*: null*/ = null;
// @flow
var likePython /*: boolean*/ = true;
//@flow
var isUndefined /*: void*/ = undefined;
//@flow
var nameOrAge /*: any*/ = "zhaoolee";
nameOrAge = 123;
//@flow
var names /*: Array<string>*/ = ["zhaoolee", "Alan", "Amy", "Alice"];
var ages /*: Array<number>*/ = [18, 22, 16, 21];
var nameOrAge /*: Array<any>*/ = ["zhaoolee", 22, "Amy", 21];
//@flow
var dog = {
name: "wang",
age: 14,
}
function sayNameAndAge(animal /*:{name: string, age: number}*/ ) {
console.log("name==>", animal.name, " | ", "age==>", animal.age);
}
sayNameAndAge(dog);
//@flow
function cal(num1 /*: number*/ , signs /*: string*/ , num2 /*: number*/ ) /*: number*/ {
var result /*: number*/ = 0;
switch (signs) {
case "+":
result = num1 + num2;
break;
case "-":
result = num1 - num2;
break;
case "*":
result = num1 * num2;
break;
case "/":
result = num1 / num2;
break;
}
return result;
}
var num1 /*: number*/ = 100;
var num2 /*: number*/ = 50;
console.log(num1 + "与" + num2 + "之和为:", cal(num1, "+", num2));
console.log(num1 + "与" + num2 + "差值为:", cal(num1, "-", num2));
console.log(num1 + "与" + num2 + "乘积为:", cal(num1, "*", num2));
console.log(num1 + "与" + num2 + "相除为:", cal(num1, "/", num2));
//@flow
function add(num1 /*: number*/ , num2 /*: ?number*/ ) /*: number*/ {
var num1 = num1 | 0;
var num2 = num2 | 0;
return num1 + num2;
}
console.log(add(1));
string
和number类型
, 就需要用到或操作
, 写法如下//@flow
var nameOrAge /*: string|number*/ = "zhaoolee";
nameOrAge = 12;