使用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 将disabled的元素置为enabled的三种方法
Jul 25 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
javascript实现在网页中运行本地程序的方法
Feb 03 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
JS实现页面打印功能
Mar 16 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
vue.js语法及常用指令
Oct 29 Javascript
详解vue移动端项目代码拆分记录
Mar 15 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
PHP.MVC的模板标签系统(一)
2006/09/05 PHP
输出控制类
2006/10/09 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
解决FastCGI 进程超过了配置的活动超时时限的问题
2013/07/03 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
用webpack4开发小程序的实现方法
2019/06/04 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
python绘图方法实例入门
2015/05/19 Python
Python3 socket同步通信简单示例
2017/06/07 Python
python 表达式和语句及for、while循环练习实例
2017/07/07 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
台湾最大网路书店:博客来
2018/03/18 全球购物
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
中国领先的汽车保养服务平台:途虎养车
2019/10/18 全球购物
英文慰问信
2015/02/14 职场文书
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android