Flow学习小结

Flow学习小结

Flow的定义。

Static Type Checker For JavaScript

一种静态类型检查工具，专门为js而生的，帮助js在开发阶段解决一些数据类型的bug。

Flow的作用

Flow能够给JavaScript提供静态类型检查的能力，其实就是为javascript添加了一个编译过程。

Flow的使用

1. 安装Flow

npm i flow-bin -D

2. 在配置文件package.json中找到script属性，并添加flow和babel指令：

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "flow": "flow",
        "build": "babel ./src -d ./dist"
    },

如下图：

其中babel中的 ./src 表示让babel转码src文件夹下的所有文件并放到 dist文件夹下，-d说明src是一个文件夹

3.在package.json同层级下生成 .flowconfig文件，具体方法就是在shell中输入 npm run flow init 。.flowconfig文件内容如图所示：

4.在package同层级下生成 .babelrc文件，并输入一下内容：

{
    "presets": [
        "flow"
    ]
}

如图所示：

5.需要编写Flow代码

• 通过注释的方式为代码添加类型 （不会对js代码产生任何更改，影响）
• 通过直接在js代码中书写类型 （改变了js代码的结构，需要通过babel进行转码之后，才能够正常的运行）

// 文件中需要添加一个标记 告诉flow当前文件需要进行类型检查！
// @flow 

var 变量 /*: 类型*/ = 数据

var 变量: 类型 = 数据

6.如果使用的是第二种方式，则需要配合babel使用

npm install babel-cli babel-preset-flow -D

// 通过babel进行转码之后，代码就可以正常运行

stall babel-cli babel-preset-flow -D

// 通过babel进行转码之后，代码就可以正常运行