静态类型检查—Flow入门
Flow入门
介绍
一个 JAVASCRIPT 静态类型检测器
- Flow 使用类型接口查找错误,甚至不需要任何类型声明。 它也能够准确地跟踪变量的类型,就像运行时那样
- Flow 专为 JavaScript 程序员设计。 他能够理解常用 JS 方言和极具动态的特性
- Flow 能立刻检测代码变化,在开发 JS 时提供快速不断地反馈
安装
- 在项目中安装flow
npm i -D flow-bin
- 在项目中安装babel插件
npm i -D babel-plugin-transform-flow-strip-types
- 在编辑器中安装flow插件,各个商店应该会有各自对应的插件
- 全局安装flow-type
npm i -g flow-typed
,flow-typed是什么见下面?
使用
在.babelrc
添加插件
{"presets": ["next/babel"],"plugins": ["transform-decorators-legacy","transform-flow-strip-types"]
}
在根目录中添加.flowconfig
文件
[ignore]
<PROJECT_ROOT>/node_modules/.*
<PROJECT_ROOT>/coverage/.*
<PROJECT_ROOT>/.next/.*[options]
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.css
module.file_ext=.scss
module.file_ext=.less
module.name_mapper.extension='css' -> 'empty/object'
module.name_mapper.extension='scss' -> 'empty/object'
module.name_mapper.extension='less' -> 'empty/object'esproposal.decorators=ignoremodule.name_mapper='^@src\/\(.*\)$' -> '<PROJECT_ROOT>/\1'
这是我项目中的配置文件,主要做了几件事
- 忽略一些不需要检查的文件夹
- 指定需要检查文件的后缀名
- 将样式文件解析成空对象
- 运行使用decorator语法
- 指定模块解析方式,因为我的模块路径都是@src开头的
在根目录中添加flow-typed
文件夹
这个文件夹是用来存放第三方或者你自己编写的定义文件的地方,在flow运行的时候会去读文件夹里所有文件的定义,当然你也可以通过配置文件修改默认文件夹的名字。
比如新建一个flow-typed/global.js
文件,来定义一些全局变量
declare var document: Object;declare var window: Object;
使用flow检查文件
新建一个文件src/index.js
// @flow
function concat(a: string, b: string): string {return a + b;
}concat("foo", "bar"); // Works!
// $ExpectError
concat(true, false); // Error!
通过在文件头部添加// @flow
来告诉flow这是个需要检查的文件,可以看到flow是个很自由的工具,尤其是对已经开发很久的项目来说,可以一点点使用flow,而不必对整个项目进行改造。
一但对参数指定好类型后,flow就可以开始正常工作了,如果需要flow检查又没有定义类型,flow也会提示你去定义。
对于如何去定义各种不同的变量、函数,这些在文档中会有更加详细的介绍,这里就不细展开了。
类型的模块化
怎么去暴露已经定义好的类型给其他文件使用呢?
- 新建一个暴露js模块,类型混合的文件
a.js
export type A = {name: string,value: number
}export default {name: 'a',value: 100
}
- 新建
b.js
引用a.js
import a from './a.js'
import type { A } from './a.js'const b: A = {...a,name: 'b'
}export default b
使用第三方库
// @flow
import _ from 'lodash' // Error
flow会报找不到该模块,这个时候需要我们去下载lodash的定义文件,用flow-typed 可以很方便的管理这些第三方库的定义文件
flow-typed
一个查找安装第三方库定义文件的管理工具
- 查找
flow-typed search lodash
Found definitions:
╔════════╤═════════════════╤═════════════════════╗
║ Name │ Package Version │ Flow Version ║
╟────────┼─────────────────┼─────────────────────╢
║ lodash │ v4.x.x │ >=v0.63.x ║
╟────────┼─────────────────┼─────────────────────╢
║ lodash │ v4.x.x │ >=v0.55.x <=v0.62.x ║
╟────────┼─────────────────┼─────────────────────╢
║ lodash │ v4.x.x │ >=v0.47.x <=v0.54.x ║
╟────────┼─────────────────┼─────────────────────╢
║ lodash │ v4.x.x │ >=v0.38.x <=v0.46.x ║
╟────────┼─────────────────┼─────────────────────╢
║ lodash │ v4.x.x │ >=v0.28.x <=v0.37.x ║
╚════════╧═════════════════╧═════════════════════╝
- 选一个版本安装
flow-typed install lodash@v4.x.x
,下载的文件会默认保存在flow-typed/npm
文件夹下,并且在flow运行的时候自动加载,这个时候就能解决刚刚’模块找不到‘的报错 - 如果搜索不到对应的定义文件怎么办?我们可以自己手动新建。
- 如果我们从npm上下了一个
clipboard
库使用 - 添加对应的定义,新建文件
flow-typed/npm/clipboard.js
declare module 'clipboard' {declare export default any
}
这里,我很粗暴的把这个模块定义成了any类型,当然如果你对模块熟悉或者想定义的更详细的话,也可以把这个模块的各个属性定义补充完整。具体怎么定义,可以查看文档,这里也不展开了。
常见问题
引入css文件报错
我们可以下载一个空模块npm i -D empty
,然后在配置文件中,把所有的样式文件指向该模块下的空对象
[options]
module.name_mapper.extension='css' -> 'empty/object'
module.name_mapper.extension='scss' -> 'empty/object'
module.name_mapper.extension='less' -> 'empty/object'
使用window、document等全局对象报错
我们可以在flow-typed/xxx.js
中,声明这些全局对象的类型
declare var document: Object;declare var window: Object;declare var process: Object;declare function fetch(url: string, option?: any): Promise<any>;
使用fetch报错,见上?
使用decorator语法报错
在配置文件中添加
[options]
esproposal.decorators=ignore
很不幸的是,即使忽略decorator语法报错,在我们暴露一些经过修饰器修饰的模块给其他文件使用的时候,也会遇到报错的问题,根本原因是flow不支持decorator语法的类型检查,所以除非这个模块不会被其他文件使用,可以使用decorator语法,不然最好的选择就是不用decorator语法
最后
感谢阅读,有错误希望能及时指正
静态类型检查—Flow入门相关推荐
- Flow - JS静态类型检查工具
本章的目标是提供一些Flow工具的介绍与使用建议.Flow本质上也只是个检查工具,它并不会自动修正代码中的错误,也不会强制说你没按照它的警告消息修正,就不会让你运行程序.当然,并没有要求什么时候一定要 ...
- 浅谈 TypeScript【上】-- Flow 静态类型检查工具
文章内容输出来源:拉勾教育 大前端高薪训练营 前言 在[编程语言分类]中,我介绍到JavaScript是一种类型不安全语言,没有明确的数据类型声明,变量的类型可以随意的更改.为了解决这种问题,微软开发 ...
- Vue中的静态类型检查
Vue还利用Javascript ES6语法来编写代码.然而,当涉及到静态类型检查时,在Vue中使用Typescript就不是那么简单了.有一些课程是关于如何将Typescript和Vue一起使用的, ...
- sql编辑器_SQL的弱点(3):缺少静态类型检查
静态类型检查的重要 如果要把SQL按照编程语言的类型来分类的话,SQL应该属于一种描述型的动态语言. 用动态语言编写的程序,当达到一定的复杂度后,相比强类型静态编译语言来说,更容易出问题. 从2个例子 ...
- 刚刚开源的Python静态类型检查器:Pyright
近日,开发者msfterictraut在GitHub上提交了一个名为Pyrignt的开源项目,这是一个Python的静态类型检查器,主要是为了解决mypy等现有的Python类型检查器无法解决的问题. ...
- React的静态类型检查
React确实利用了JavaScript ES6基础作为代码语法,但是它是否支持编译时的类型检查之类的功能呢? 嗯,是的! 你可以用Flow来做静态检查,它是Facebook开发人员开发的TypeSc ...
- flow 静态类型检查 js
1.flow介绍 https://ustbhuangyi.github.io/vue-analysis/prepare/flow.html#为什么用-flow 2.使用 (1)安装flow (2)项目 ...
- python类型提示包 检查静态类型_Pyright:微软提供的Python静态类型检查器
改进您的编程技术和方法,成为一个更有生产力和创造性的Python程序员.本书探索了一些概念和特性,这些概念和特性不仅将改进您的代码,而且还将帮助您理解Python社区,并对Python哲学有深入的 ...
- javascript优缺点_为什么要在JavaScript中使用静态类型? 优缺点
javascript优缺点 by Preethi Kasireddy 通过Preethi Kasireddy 为什么要在JavaScript中使用静态类型? 优缺点 (Why use static t ...
最新文章
- python发明者叫什么-python是谁的
- Hibernate4一对一关系映射(唯一外键方式)
- Linux 安全基线
- java 及时释放内存_Java 内存释放
- mac mysql 移动硬盘_MAC一些高能过程记录(一些没必要的坑)
- JavaFX技巧10:自定义复合控件
- 解决win7下无法安装突击者NO.69驱动,“WINDOWS已找到设备的驱动程序,但在试图安装它时错误”...
- java幂等性原理_Java接口幂等性设计原理解析
- 如何使用Java进行网络爬虫
- 三思笔记之一步一步学ORACLE
- 禁用win10 1903 wifi诊断
- Android 仿微信发送坐标,Android最新版高德地圖poi檢索仿微信發送位置
- 第一次用 Mac git 遇到的一些问题及解决方法,记录一下
- 磨金石教育摄影技能干货分享|优秀作品欣赏—技巧十足的艺术摄影
- 小闫陪你入门 Java (一)
- 数学建模PPT(三)
- 数据分析案例-基于PCA主成分分析法对葡萄酒数据进行分析
- 基于 Tensorflow 的蘑菇分类
- beta冲刺(3/7)
- hive数据备份与恢复
热门文章
- 【bzoj4176】Lucas的数论 莫比乌斯反演+杜教筛
- ExtJS4.x动态加载js文件
- poj 1637(混合图求欧拉回路)
- beta book读书俱乐部的构思
- 系统集成项目管理工程师-项目风险管理笔记
- Maven 之常用命令
- Intel汇编程序设计-整数算术指令(上)
- hdu4993(水题)
- ZOJ3715 竞选班长求最小花费
- 【Linux 内核】调度器 ③ ( sched_class 调度类结构体分析 | next 字段 | enqueue_task 函数 | dequeue_task 函数 )