fackbook flow 简单使用

flow 是一个javascript 静态检查的工具，由facebook 开发， 使用起来简单，方便。

安装

• 项目初始化

 yarn init -y

• 编译器安装

yarn add --dev babel-cli babel-preset-flow
配置babel
.babelrc
{
  "presets": ["flow"]
}
 package.json
{
  "name": "my-project",
  "main": "lib/index.js",
  "scripts": {
    "build": "babel src/ -d lib/",
    "prepublish": "yarn run build"
  }
}
设置 flow
yarn add --dev flow-bin
运行
yarn run flow
备注：需要先执行yarn run flow init

简单demo

• 项目结构

├── lib  //  输出目录
│ ├── api
│ │ ├── api.js
│ │ └── index.js
│ └── user
│ └── user.js
├── package.json
├── src  // flow 源码目录
│ ├── api
│ │ ├── api.js
│ │ └── index.js
│ └── user
│ └── user.js
└── yarn.lock

• 代码说明

package.sjon
{
"name": "second",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-flow": "^6.23.0",
"flow-bin": "^0.77.0"
},
"scripts": {
"build": "babel src/ -d lib/",
"flow":"flow",
"i":"flow init",
"start":"node lib/api"
}
}
src/user/user.js
// @flow
// 函数定义
function getinfo(name:string):string {
return name;
}
module.exports={
name:"dalong",
age:33,
get:getinfo
}
src/api/api.js
// @flow
function call(name:string):string {
const user = require("../user/user")
return user.get("dalong")
}
module.exports=call
src/api/index.js
// @flow
const api = require("./api")
console.log(api("dalong"))

• 构建&&运行

yarn build
yarn start

• 参考提示
  
  

说明

实际使用vscode 需要将系统内部的ts 检查，禁止，同时添加以下插件 ，总的来说还是就表简答，使用比较方便的，
flow-typed 也是一个不错的选择，帮助我们校验三方类库类似ts 的typings

参考资料

https://flow.org/en/docs/libdefs/
https://github.com/flow-typed/flow-typed#readme
https://flow.org/en/docs/getting-started/