js的由弱变强之路,Flow为js添加编译过程

作者: zhaoolee | 来源:发表于2018-10-30 09:26 被阅读93次

js的由弱变强之路,Flow为js添加编译过程
JS作用域
2018-10-11:JS与jQuery基础
vue2.0项目配置flow类型检查
19. JS的解析
flow.js
1：flow---在vue中的应用
《你不知道的JS上》笔记
typescript
环境搭建

javascript是一门弱类型语言, 所谓弱类型, 就是一个变量既可以被赋值字符串, 数字, 又可以被赋值数组, 对象, 弱类型的好处很多, 但也有缺点, 比如:

跳过了编译过程, 导致代码中的错误只能在运行时才能显现出来
由于变量的类型灵活多变, 导致代码可读性降低, 不容易排错
由于变量形式灵活多变, 导致IDE的智能提示不够准确

Facebook的Flow

官网地址: https://flow.org/

github开源地址: https://github.com/facebook/flow

Facebook开发了一个名为Flow的框架, 为javascript添加了编译的过程, 可以让我们用类似java的强类型风格, 编写js语言, 使用方法非常简单, 以下是flow的一些使用实例

初始化一个npm项目

// 新建一个文件夹
mkdir learn-flow
// 进入文件夹
cd learn-flow
// 初始化项目
npm init -y

安装flow

npm install flow-bin

在`package.json`中添加启动脚本

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "flow": "flow"
  },

创建flow配置文件`.flowconfig`

npm run flow init

使用方法

原js代码:

var userName = "zhaoolee";
var userAge = 22;

非破坏式的写法(通过注释)

在项目learn-flow中新建一个user.js文件

//@flow
var userName /*: string*/ = "zhaoolee";
var userAge /*: number*/ = 18;

注意点: 需要在文件首部添加 //@flow标记, 否则无法进行类型检测

进行类型检测

npm run flow

如果声明与赋值的类型不匹配,则会产生报错信息

flow中支持检测的类型有哪些呢?

number: 数字, NaN, Infinity, 写法如下

//@flow
var num1 /*: number*/ = 100;
var num2 /*: number*/ = NaN;
var num3 /*: number*/ = Infinity;

string: 字符串, ,写法如下

//@flow
var name /*: string*/ = "zhaoolee";

null: 就是`null`, ,写法如下

//@flow
var likePython /*: null*/ = null;

boolean: 就是布尔类型, 写法如下

// @flow
var likePython /*: boolean*/ = true;

void: 在flow中, undefined属于void, 写法如下

//@flow
var isUndefined /*: void*/ = undefined;

any: 表面可以使用任何类型, 这个相当于js原生的类型(动态),写法如下

//@flow
var nameOrAge /*: any*/ = "zhaoolee";
nameOrAge = 123;

Array: 数组类型, 定义时,需要指定数组内元素的类型, 写法如下

//@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];

Object: 对象类型, 写法如下

对object的每个属性进行检查

//@flow
var dog = {
    name: "wang",
    age: 14,
}

function sayNameAndAge(animal /*:{name: string, age: number}*/ ) {
    console.log("name==>", animal.name, " | ", "age==>", animal.age);
}

sayNameAndAge(dog);

Function: 函数类型, 写法如下

//@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));

Maybe: null和void类型的组合, 写法如下:

//@flow
function add(num1 /*: number*/ , num2 /*: ?number*/ ) /*: number*/ {
    var num1 = num1 | 0;
    var num2 = num2 | 0;
    return num1 + num2;
}

console.log(add(1));

或操作: 类型1 | 类型2, 写法如下

如果需要某变量只能接受 string和number类型, 就需要用到或操作, 写法如下

//@flow
var nameOrAge /*: string|number*/ = "zhaoolee";
nameOrAge = 12;

小结:

对于弱类型(动态类型)的语言, 好处很多,博主也非常喜欢弱类型,在《黑客与画家》中有一段很有意思的话, 充分说明了动态语言的优势

事实上, 在商业化的工程中, 类似java这种强类型(静态类型)的语言, 编写的项目,更容易做大
我周围的人都喜欢python, 但也经常听到吐槽: python太灵活了, 即使某个判断分支有错误, 只要执行不到这一步, 就不会报错, 这样就让工程的维护和排错变得麻烦, 所以说Flow这种为动态语言添加编译过程的工具, 还是蛮有用的, 所以, 不如花20分钟学习一下Flow