使用flow来规范javascript的变量类型


Posted in Javascript onSeptember 12, 2019

众所周知, js是弱类型的语言,由此有了很多的优点,也出现了大量由此导致的错误,难以定位。当然有类似于ts之类的语法糖来解决此问题,ts因为是从c#演变而来的,所以入门有一定的门槛,所以我们来一下flow这个更轻巧的工具。

先来看一下flow在vs code中的表现效果:

使用flow来规范javascript的变量类型

跟ts的提示类似,它会实时检测所有的包含flow注释的文件,在vscode中需要安装Flow Language Support插件.

如何安装

安装过程可以使用yarn和npm安装,推荐使用yarn,因为安装起来会更快。

yarn add --dev @babel/core @babel/cli @babel/preset-flow

 然后在.babelrc中添加此插件

{
 "presets": ["@babel/preset-flow"]
}

 添加flow-bin的依赖

yarn add --dev flow-bin

 执行flow:

yarn run flow

执行成功后,会在后台启动一个进程进行监听,如果你已经安装了vscode的插件的话,可以忽略这一步,插件会自动启用flow.

 使用强类型

做完上面这些后,你就可以在你的js文件中使用强类型来约束你的代码了,在需要使用flow的文件头部添加/ / @flow

// @flow
function foo(x: ?number): string {
 if (x) {
  return x;
 }
 return "default string";
}

然后运行 yarn run flow  你就可以看到如下的输出

test.js:5
 5:   return x;
        ^ number. This type is incompatible with the expected return type of
 3: function foo(x: ?number): string {
                ^^^^^^ string

如果你使用vscode的插件,就会在保存的时候自动提示这些错误出来,如第一张示例图片那样。

相关资料:

flow官网:https://flow.org/en/

在线尝试:https://flow.org/try/

总结

以上所述是小编给大家介绍的使用flow来规范javascript的变量类型,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
Aug 14 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
vant 解决tab切换插件标题样式自定义的问题
Nov 13 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
LayUI数据接口返回实体封装的例子
Sep 12 #Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 #Javascript
layui框架与SSM前后台交互的方法
Sep 12 #Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 #Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 #Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 #Javascript
JS计算斐波拉切代码实例
Sep 12 #Javascript
You might like
星际玩家的三大定律
2020/03/04 星际争霸
PHP XML备份Mysql数据库
2009/05/27 PHP
php 验证码实例代码
2010/06/01 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
PHP运行模式的深入理解
2013/06/03 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
财务会计专业推荐信
2013/11/30 职场文书
爱心捐款倡议书
2014/04/14 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
行政二审代理词
2015/05/25 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js