Flow的介绍

官网

Flow是什么？

Static Type Checker For JavaScript

静态类型检查工具

Flow能做什么？

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

Flow的使用

1. 安装Flow

npm i flow-bin -D

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

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

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

var 变量: 类型 = 数据

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

Flow的基本使用步骤

安装

npm init -y
npm i flow-bin -D

书写代码，为代码添加类型

var 变量: 数据类型 = 数据;

1. 通过注释的方式添加 (不会改写js代码，代码在添加完类型之后仍然可以正常运行)
2. 通过直接给数据添加类型，改写js代码，如果要正常运行，需要使用babel进行转码

使用flow进行类型检查

0. 在pacakge.json文件中，scripts属性中添加flow命令

1. 需要为flow创建一个配置文件.flowconfig

npm run flow init

2. 执行类型检查

npm run flow

使用babel对flow代码进行转码

如果给数据添加类型声明是通过第二种方式，直接修改的js代码，那么代码是不能正常运行的

我们需要通过babel对代码进行转码之后才能正常运行

1. 安装babel以及presets

npm i babel-cli babel-preset-flow -D

2. 配置package.json添加build命令调用babel
   ···json
   {
   “scripts”: {
   “build”: “babel ./src -d ./dist”
   }
   }
   ···
3. 执行build命令对文件进行转换

npm run build

flow 中的类型

// number类型
// number类型可以赋值的内容为： 数字、NaN、Infinity
let a: number = 100;
let b: number = NaN;
let c: number = Infinity;

// string类型
// string类型可以赋值的内容为: 字符串
let str: string = "abc";

// boolean 布尔值类型
// void  javascript中的undefined
// null  js中的null

// Array类型
// 在声明数据为数组类型的时候，我们需要为数组指定元素的类型
let arr: Array<number> = [1, 2, 3, 4];

let name: any = 123;
name = "123"

let arr1: Array<any> = [1, 'a', {}, []];

flow中的函数类型

function test(a: number, b: number): number{
    return a + b;
}

// var a: string = test(1, 2);

// 可以将变量声明为函数类型
// 也就意味着我们可以指定为变量赋值的函数的类型
let func: (a: number, b: number) => string = test;

function ajax(callback: (data: Object) => void) { 

}

ajax(function (obj: Object) { 

})

flow中的Maybe类型

function test(a: ?number) {
    a = a || 0;
    console.log(a);
}

test(10);

test();

// Maybe类型相当于给数据添加了两个可能的类型null和void

flow中类型的或操作

// let a: number|string = 10;
// a = "abc";
// a = {};

// 类型推断
function test(a: number, b: number) {
    return a + b;
}

let c: string = test(1, 2);

flow中的对象类型

// @flow
// function greet(obj: { sayHello: () => void, name: string }) {
//     obj.sayHello();
// }

// var o = {
//     name: "张学友",
//     sayHello() {
//         console.log("Hello")
//     }
// }

// greet(o);

function ajax(option: {url: string, type: string, success: (data: Object) => void}) {
    
}

// option需要有url参数，还需要有type参数 还需要有success参数

ajax({});