使用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 相关文章推荐
Javascript变量函数浅析
Sep 02 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
非常有用的40款jQuery 插件推荐(系列二)
Dec 25 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
js获取form的方法
May 06 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
详解jQuery中的easyui
Sep 02 jQuery
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 Javascript
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
PHP版自动生成文章摘要
2008/07/23 PHP
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
PHP中常用的输出函数总结
2014/09/22 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
2016/09/24 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
解决webpack dev-server不能匹配post请求的问题
2018/08/24 Javascript
vue 项目地址去掉 #的方法
2018/10/20 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
uni-app如何页面传参数的几种方法总结
2020/04/28 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
python中的五种异常处理机制介绍
2014/09/02 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
python 装饰器的使用示例
2020/10/10 Python
python unichr函数知识点总结
2020/12/16 Python
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
毕业生就业自荐书
2013/12/15 职场文书
新员工欢迎词
2014/01/12 职场文书
教师师德承诺书
2014/03/26 职场文书
广播节目策划方案
2014/05/23 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
个人事迹材料范文
2014/12/29 职场文书