flow从零开始----安装和配置

资源

• 官网：https://flow.org/
• 安装：https://flow.org/en/docs/inst...
• 参考：https://www.01hai.com/note/av... https://www.jianshu.com/p/868e0fe373ed

什么是Flow

JavaScript是一个弱类型的解释性语言，没法在编译环节进行静态类型校验，若是想JS也具有静态类型检查功能。那就得使用到Flow,Flow由Facebook推出，官网是 https://flow.org/。Flow与微软的TypeScript有些相似，但TypeScript其实像是另外一门新语言，而Flow能够理解为一个工具，象vue二、react等都是基于Flow开发，因此颇有必要了解一下Flow。

安装Flow

安装方法：有npm和yarn两种，yarn为facebook出品，如今好象更流行一些
安装方式：全局安装 yarn global add flow-bin
安装过程：

$ yarn global add flow-bin
yarn global v1.12.3
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "flow-bin@0.89.0" with binaries:
      - flow
Done in 6.32s.

安装位置：

$ yarn global bin
C:\Users\Administrator\AppData\Local\Yarn\bin
# 注意：npm全局安装位置是C:\Users\Administrator\AppData\Roaming\npm
# 注意：请将...Yarn\bin目录添加到系统全局变量path中

cli命令说明：

$ flow --help  # 查看帮助信息
# flow 命令，其实是调用的是C:\Users\Administrator\AppData\Local\Yarn\Data\global\node_modules\flow-bin\flow-win64-v0.89.0\flow.exe，不一样操做系统调用的是不一样的执行文件

配置

工做目录：切换到项目根目录，个人是F:\youshengyouse\learn-flow
配置flow: 命令是$ flow init，它会在当前目录下生成一个.flowconfig文件，内容以下

[ignore]

[include]

[libs]

[lints]

[options]

[strict]

Flow注释JS文件

凡加Flow注释的文件，如下称flow文件，flow文件就是将// @flow或 /* @flow */加到js文件的最顶部。只有flow文件，flow进程才会在后台监视这些文件，当有类型检查时，有错误它就会报错
准备第1个js文件: 内容以下

// @flow
function square(n:number): number {
    return n * n;
}

square('2')

执行 flow check，报错以下：

$ flow check
Error ---------------------------------------------------------------------------- a.js:6:8

Cannot call `square` with `'2'` bound to `n` because string [1] is incompatible with number [2].

   a.js:6:8
   6| square('2')
             ^^^ [1]

References:
   a.js:2:19
   2| function square(n:number): number {
                        ^^^^^^ [2]

Found 1 error

将square('2')改成square(2)再flow check看下

$ flow check
Found 0 errors

或者将// @flow去掉，都会提示Found 0 errors

Flow服务器

启动: flow status
中止: flow stoop

删除flow类型标注

function square(n:number): number {中的类型标注，如:number，含有这样的js文件，事实上运行起来会报错的，不管是在nodejs仍是浏览器中，如今在nodejs中运行测试下

$ node a.js
F:\youshengyouse\del\a.js:2
function square(n:number): number {
                 ^

SyntaxError: Unexpected token :
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
    at startup (internal/bootstrap/node.js:283:19)

将两个:number去掉再测试下，不会报错。因此说flow文件是两个过程，编程时加上类型检查，最后成品代码中，得将全部的类型约束要去掉，去掉这个过程确定不能人工操做，有相应的程序处理。目前有两个方法去掉类型注解，一是包flow-remove-types，二是在babel中去掉

方法一：flow-remove-types

官方文档： https://flow.org/en/docs/tool...

安装

# 若是没有package.json文件，先生成
yarn add --dev flow-remove-types
# or
npm install --save-dev flow-remove-types

去类型

# 为了方便，先将a.js移到src目录下
$ yarn run flow-remove-types src/ -d dist/
yarn run v1.12.3
$ F:\youshengyouse\del\node_modules\.bin\flow-remove-types src/ -d dist/
src\a.js
 ↳ dist\a.js
Done in 0.30s.

去类型前

// @flow
function square(n:number): number {
    return n * n;
}

square(2)

去类型后

//      
function square(n       )         {
    return n * n;
}

square(2)

方法二：Babel的预置babel-preset-flow

安装

yarn add --dev babel-cli            # 凡须要在命令行执行babel，得安装babel-cli
yarn add --dev babel-preset-flow    # 目的就是去除类型

提示： babel在没有配置时，也不认识类型，也会报错，如没有配置就转码，会报错以下

$ ./node_modules/.bin/babel src -d dist
SyntaxError: src/a.js: Unexpected token, expected , (2:17)
  1 | // @flow
> 2 | function square(n:number): number {
    |                  ^
  3 |     return n * n;
  4 | }
  5 |

如今配置预置看下，新建配置文件 .babelrc，内容以下

{
  "presets": ["flow"]
}

再执行

$ ./node_modules/.bin/babel src -d dist
src\a.js -> dist\a.js

没有报错，打开dist/a.js看下，内容以下

function square(n) {
    return n * n;
}

square(2);

类型约束所有去掉了。查看flow预置源码，其实它只是包装了@babel/plugin-transform-flow-strip-types这个插件而已，干活的是这个插件，打开源码，其实比较好理解，就是删除// @flow及类型

类型自动检查

上面使用flow check来进行类型检查，不是很方便，我想babel的插件来进行类型检查，并在编辑器如vs code中自动检查，这样效率就会高不少，这就要用到插件babel-plugin-typecheck，它与预置flow的功能彻底不同，babel-plugin-typecheck是检查代码中的类型是否有错，babel-preset-flow是负责删除类型的，这样js代码在执行时就好象历来没有加过类型同样。

在vs code中配置类型

在VS Code中搜索flow，发现有vscode-flow-ide、Flow-Language-Support两个插件，在这里以vscode-flow-ide为例
先安装vscode-flow-ide
条件：

1. 项目根目录有配置文件.flowconfig
2. nodejs添加到了环境变量path中
3. 全局或项目内安装了flow,推荐全局安装flow-bin

配置(默认就行)
VS Code左下角管理/设置/User Settings/Extensions/Flow-IDE Configurations(只有启用后才能配置，不然找不到这项)，下面是文字版，实际上在面板中就能够设置

• flowide.enable: 启用/关闭
• flowide.pathToFlow: Absolute path to the Flow executable. Set it only if the default behaviour of the extension doesn't work out for you. The extension will try first to read it from local node_modules/flow-bin or globally if not otherwise set here.
• flowide.useCodeSnippetsOnFunctionSuggest - Add the function paramters when selecting a function to autocomple.

重启vs Code，就会发现能够报错了，如今能够去掉顶部的// @flow及传递不合要求的参数测试下。

若是在problem窗口有错误，[ts]'types' can only be used in a .ts file. 8010，请在扩展中找到typescript，找到"javascript.validate.enable": false

总结：

• 类型检查尽可能在编辑器中设置
• 删除类型尽可能在babel中自动完成