flow.js静态类型检查

flow入门demo

1. 初始化一个flow项目

mkdir flow-demo
cd flow-demo
npm init -y
npm i flow-bin flow-remove-types --save-dev //安装flow

2. 修改package.json

"main": "src/index.js",
"scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "flow": "flow",
   "build": "flow-remove-types src -d dist"
},
"devDependencies": {
   "flow-bin": "^0.104.0",
   "flow-remove-types": "^2.104.0"
}

3. 命令行执行npm run flow init创建.flowconfig文件
4. 创建文件flow-demo/src/index.js如下

//@flow
var username : string = "lyt";
var password : number = "123456";

5. 命令行执行npm run flow,结果报错如图
   
   说明var password : number = "123456"; 处报错，声明number类型却赋值string类型，需要改为var password : number = 123456; 。修改之后命令行执行npm run flow 结果如图
6. 命令行执行npm run build ,打包后的文件在flow-demo/dist 中

webstrom集成flow

打开file->settings->Language & Framework->JavaScript界面。
将JavaScript Version选为Flow并选择Flow executable，如图

vs code集成flow

安装vscode-flow-ide或者Flow-Language-Support插件。

flow原始类型

• Boolean
• String
• Number
• Null
• Undefined
• Symbol

// @flow
function method(x: number, y: string, z: boolean) {
  // ...
}
method(3.14, "hello", true); //works
"foo" + {};    // Error!
"foo" + [];    // Error!

1. 多类型声明

//@flow
var username: string = "lyt";
var password: number = 123456;
var a: string | number = 3333;
function getColor(name: "success" | "warning" | "danger") {}

2. 可能类型?type
   表示可能是type类型，也可能是null或undefined

// @flow
//函数参数是?type类型
function acceptsMaybeString(value: ?string) {
  // ...
}
acceptsMaybeString("bar");     // Works!
acceptsMaybeString(undefined); // Works!
acceptsMaybeString(null);      // Works!
acceptsMaybeString();          // Works!

//对象属性是?type类型
function acceptsObject(value: { foo?: string }) {
  // ...
}
acceptsObject({ foo: "bar" });     // Works!
acceptsObject({ foo: undefined }); // Works!
acceptsObject({ foo: null });      // Error!
acceptsObject({});  

3. 函数参数默认值

// @flow
function acceptsOptionalString(value: string = "foo") {
  // ...
}

acceptsOptionalString("bar");     // Works!
acceptsOptionalString(undefined); // Works!
acceptsOptionalString(null);      // Error! 有默认值的可以传 undefined 但不能传 null
acceptsOptionalString();          // Works!

4. 类声明

详细语法

类型详情文档查看flow官方文档