flow入门demo
- 初始化一个flow项目
mkdir flow-demo
cd flow-demo
npm init -y
npm i flow-bin flow-remove-types --save-dev //安装flow
- 修改
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"
}
- 命令行执行
npm run flow init
创建.flowconfig文件 - 创建文件
flow-demo/src/index.js
如下
//@flow
var username : string = "lyt";
var password : number = "123456";
- 命令行执行
npm run flow
,结果报错如图
说明var password : number = "123456";
处报错,声明number类型却赋值string类型,需要改为var password : number = 123456;
。修改之后命令行执行npm run flow
结果如图 - 命令行执行
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!
- 多类型声明
//@flow
var username: string = "lyt";
var password: number = 123456;
var a: string | number = 3333;
function getColor(name: "success" | "warning" | "danger") {}
- 可能类型
?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({});
- 函数参数默认值
// @flow
function acceptsOptionalString(value: string = "foo") {
// ...
}
acceptsOptionalString("bar"); // Works!
acceptsOptionalString(undefined); // Works!
acceptsOptionalString(null); // Error! 有默认值的可以传 undefined 但不能传 null
acceptsOptionalString(); // Works!
- 类声明
详细语法
类型详情文档查看
flow官方文档