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

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

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

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, 写法如下

  • 如果需要某变量只能接受 stringnumber类型, 就需要用到或操作, 写法如下
//@flow
var nameOrAge /*: string|number*/ = "zhaoolee";
nameOrAge = 12;

小结:

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏tkokof 的技术,小趣及杂念

Sweet Snippet系列之 Print Lua Table

Lua中唯一的内建数据结构就是关联数组(table),平时我们使用Lua时自然也一直在和table打交道,由于Lua中table的灵活性,使其拥有了强大的数据表...

8210
来自专栏做全栈攻城狮

程序员带你十天快速入门Python,玩转电脑软件开发(四)

本系列文章立志于从一个已经习得一门编程语言的基础之上,全面介绍Python的相关开发过程和相关经验总结。本篇文章主要是基于上一篇的程序员带你十天快速入门Pyth...

11840
来自专栏木可大大

编写优雅代码的最佳实践

Robert Martin曾说过"在代码阅读中说脏话的频率是衡量代码质量额唯一标准"。同时,代码的写法应当使别人理解它所需的时间最小化,也就是说我们写的代码是给...

464200
来自专栏C/C++基础

C++类的设计与实现规范

规范是一种规定,遵守这种规定能够带来长远的利益,而违反这种规定却不会立即收到惩罚。程序设计的规范是人们在长期的编程时间中总结出来的,深入理解中这些规范需要认真的...

9520
来自专栏小樱的经验随笔

BugkuCTF 矛盾

15920
来自专栏高性能服务器开发

写给新手们看的编程修养

什么是好的程序员?是不是懂得很多技术细节?还是懂底层编程?还是编程速度比较快?我觉得都不是。对于一些技术细节来说和底层的技术,只要看帮助,查资料就能找到,对于速...

15130
来自专栏数据科学学习手札

(数据科学学习手札32)Python中re模块的详细介绍

  关于正则表达式,我在前一篇(数据科学学习手札31)中已经做了详细介绍,本篇将对Python中自带模块re的常用功能进行总结;

33940
来自专栏FreeBuf

无须字母构建XSS向量

要求 之前我在玩一个XSS游戏的时候突然有了些想法,本着分享的原则,于是便有了这篇文章。在此,我将分享一个此前没有接触过的一个XSS攻击向量。 相同水平的前提...

23590
来自专栏喵了个咪的博客空间

zephir-(11)流程控制语句

#zephir-流程控制语句# ? ##前言## 先在这里感谢各位zephir开源技术提供者 ZEPHIR实现了一个简化的控制结构语句,类似的语言如C,PHP等...

32540
来自专栏chenjx85的技术专栏

vector.clear()不能用来清零

vector.clear()函数并不会把所有元素清零,笔者就曾经这样幻想过这个函数的作用,然而事实证明并不是。

3.1K20

扫码关注云+社区

领取腾讯云代金券