Flow：Facebook 的 JavaScript 静态类型检查器

JavaScript写起来，行云流水、挥洒自如、无拘无束、笔走龙蛇、为所欲为

金主粑粑，每天抓狂，小修小补的hotfix从未停止，脆弱的代码经不住半点风浪

Flow是JavaScript代码的静态类型检查器。 它可以帮助您提高工作效率。 让您的代码更快，更智能，更自信，更大规模。

Flow通过静态类型注释检查代码是否存在错误。 这些类型允许您告诉Flow您希望代码如何工作，Flow将确保它以这种方式工作。

1.从demo开始认识flow

2.安装，配置

3.flow总结及使用

前言

我们知道react源码现在还是采用flow + js的方式，下图截取一小段react Fiber源码，先混个脸熟

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */
import type {ReactElement} from 'shared/ReactElementType';
import type {ReactFragment, ReactPortal, ReactScope} from 'shared/ReactTypes';
import type {Fiber} from './ReactInternalTypes';
import type {RootTag} from './ReactRootTags';
import type {WorkTag} from './ReactWorkTags';
import type {TypeOfMode} from './ReactTypeOfMode';
import type {Lanes} from './ReactFiberLane.new';
import type {SuspenseInstance} from './ReactFiberHostConfig';
import type {OffscreenProps} from './ReactFiberOffscreenComponent';

1.从demo开始认识flow

1.1 出入参静态类型注释

// @flow
function square(n: number): number {
  return n * n;
}

square("2"); // Error!

报错信息：

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ common/globFile.js:26:8

Cannot call square with '2' bound to n because string [1] is incompatible with number [2].

1.2.运算结果类型检查

因为Flow很好地理解JavaScript，所以它不需要很多这些类型。 你应该只需要做很少的工作来描述你的Flow代码，它将推断其余部分。 在很多时候，Flow可以完全理解您的代码而不需要任何类型

// @flow
function square(n) {
  return n * n; // Error!
}

square("2");

报错信息： Cannot perform arithmetic operation because string [1] is not a number.

2.安装

2.1 安装编译器

官方推荐babel或flow-remove-types

npm install --save-dev @babel/cli @babel/preset-flow

项目增加babel.config.js文件

module.exports = function() {
  return {
    presets: [
      "@babel/preset-flow"
    ]
  }
}

package.json中添加scripts

{
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/preset-flow": "^7.0.0",
  },
  "scripts": {
    "build": "babel src/ -d lib/",
    "prepublish": "npm run build"
  }
}

2.2 安装flow

npm install --save-dev flow-bin

package.json中添加scripts

{
  "devDependencies": {
    "flow-bin": "^0.99.0"
  },
  "scripts": {
    "flow": "flow"
  }
}

生成flowconfig配置文件

npm run flow init

运行flow

npm run flow

3.flow总结及使用

• 3.1 使用flow init初始化项目
• 3.2 使用flow启动Flow后台进程flow status
• 3.3 使用// @flow确定Flow将监视哪些文件
• 3.4 编写flow代码
• 3.5 检查代码是否存在类型错误
• 3.6 如何在代码中添加类型注释

3.1 使用 flow init 初始化项目

生成类似INI格式，项目.flowconfig配置文件

3.1.1 .flowconfig由6个部分组成

; 忽略匹配文件
[ignore]
<PROJECT_ROOT>/__tests__/.*
<PROJECT_ROOT>/lib/.*

; 包含指定的文件或目录
[include]
<PROJECT_ROOT>/src/.*

; 在类型检查代码时包含指定的库定义
[libs]

; lint
[lints]
all=warn
untyped-type-import=error
sketchy-null-bool=off

; 选项
[options]
all=true
esproposal.decorators=ignore
experimental.const_params=true
module.file_ext=.bar
module.use_strict=true

; 严格
[strict]
nonstrict-import
unclear-type
unsafe-getters-setters
untyped-import
untyped-type-import


; none
; 在声明模式下，代码没有进行类型检查，会检查文件内容
[declarations]
<PROJECT_ROOT>/third_party/.*

; 不检查文件内容，不匹配指定正则表达式的类型文件，丢弃类型并将模块视为任何模块
[untyped]
<PROJECT_ROOT>/third_party/.*

; 指定flow使用的版本
[version]
0.98.1

3.1.2 # or ; or ? are ignored

# This is a comment
  # This is a comment
; This is a comment
  ; This is a comment
? This is a comment
  ? This is a comment

3.1.3 .flowconfig放置位置

.flowconfig的位置非常重要。Flow将包含.flowconfig的目录视为项目根目录。 默认情况下，Flow包含项目根目录下的所有源代码

3.2 使用flow启动flow后台进程

vscode推荐安装Flow Language Support

flow status // 启动flow后台进程
flow stop   // 终止flow后台进程

webpack热加载，使用flow-webpack-plugin

'use strict';

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const FlowWebpackPlugin = require('flow-webpack-plugin');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry:  './example/app.js',
  output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, './dist'),
  },
  devServer: {
      hot: true,
      disableHostCheck: true,
      historyApiFallback: true
  },
  plugins: [
      new HtmlWebpackPlugin({ template: 'example/index.html' }),
      new FlowWebpackPlugin({
        flowArgs: ['check']
      })
  ],
};

3.3 使用// @flow确定Flow将监视哪些文件

Flow后台进程使用此标志收集所有文件，并使用所有这些文件中提供的类型信息来确保一致性和无错误编程

使用JavaScript注释的形式，注释@flow

// @flow

或

/* @flow */

忽略//@flow，检查所有文件

flow check --all

3.4 编写flow代码

Flow后台进程将会捕获此错误

// @flow

function foo(x: ?number): string {
  if (x) {
    return x;
  }
  return "default string";
}

3.5 检查代码是否存在类型错误

# equivalent to `flow status`
flow

运行flow检查

// @flow

function foo(x: ?number): string {
  if (x) {
    return x;  // Cannot return `x` because  number [1] is incompatible with  string [2].
  }
  return "default string";
}

3.6 如何在代码中添加类型注释

类型注释符号

|       // 或
&       // 且 
?       // 可选

类型注释中包括的类型

boolean                                 // true or new Boolean(false)
string                                  // "hello" or new String("world")
number                                  // 3.14 or new Number(42)
null                                    // null
undefined (void in Flow types)          // undefined
Array (其中T用来描述数组中值的类型)     // Array<T>
Object                                  // {}
Function                                // function
class                                   // class
Symbols (not yet supported in Flow)     // Symbol("foo")

小写

// @flow
function method(x: number, y: string, z: boolean) {
  // ...
}

method(3.14, "hello", true);

大写

// @flow
function method(x: Number, y: String, z: Boolean) {
  // ...
}

method(new Number(42), new String("world"), new Boolean(false));

boolean

// @flow
function acceptsBoolean(value: boolean) {
  // ...
}

acceptsBoolean(true);  // Works!
acceptsBoolean(false); // Works!
acceptsBoolean("foo"); // Error!

JavaScript可以隐式地将其他类型的值转换为布尔值

if (42) {} // 42 => true
if ("") {} // "" => false

非布尔值需要显式转换为布尔类型

// @flow
function acceptsBoolean(value: boolean) {
  // ...
}

acceptsBoolean(0);          // Error!
acceptsBoolean(Boolean(0)); // Works!
acceptsBoolean(!!0);        // Works!

string

// @flow
function acceptsString(value: string) {
  // ...
}

acceptsString("foo"); // Works!
acceptsString(false); // Error!

JavaScript可以隐式地将其他类型的值转换为字符

"foo" + 42; // "foo42"
"foo" + {}; // "foo[object Object]"

Flow连接到字符串时只接受字符串和数字。

// @flow
"foo" + "foo"; // Works!
"foo" + 42;    // Works!
"foo" + {};    // Error!
"foo" + [];    // Error!

必须明确并将其他类型转换为字符串

// @flow
"foo" + String({});     // Works!
"foo" + [].toString();  // Works!
"" + JSON.stringify({}) // Works!

number

// @flow
function acceptsNumber(value: number) {
  // ...
}

acceptsNumber(42);       // Works!
acceptsNumber(3.14);     // Works!
acceptsNumber(NaN);      // Works!
acceptsNumber(Infinity); // Works!
acceptsNumber("foo");    // Error!

null and void

// @flow
function acceptsNull(value: null) {
  /* ... */
}

function acceptsUndefined(value: void) {
  /* ... */
}

acceptsNull(null);           // Works!
acceptsNull(undefined);      // Error!
acceptsUndefined(null);      // Error!
acceptsUndefined(undefined); // Works!

Array

let arr: Array<number> = [1, 2, 3];
let arr1: Array<boolean> = [true, false, true];
let arr2: Array<string> = ["A", "B", "C"];
let arr3: Array<mixed> = [1, true, "three"]

Object

// @flow
var obj1: { foo: boolean } = { foo: true };
var obj2: {
  foo: number,
  bar: boolean,
  baz: string,
} = {
  foo: 1,
  bar: true,
  baz: 'three',
};

Function

// @flow
function concat(a: string, b: string): string {
  return a + b;
}

concat("foo", "bar"); // Works!
// $ExpectError
concat(true, false);  // Error!

箭头Function

let method = (str, bool, ...nums) => {
  // ...
};

let method = (str: string, bool?: boolean, ...nums: Array<number>): void => {
  // ...
};

回调Function

function method(callback: (error: Error | null, value: string | null) => void) {
  // ...
}

class

// @flow
class MyClass<A, B, C> {
  constructor(arg1: A, arg2: B, arg3: C) {
    // ...
  }
}

var val: MyClass<number, boolean, string> = new MyClass(1, true, 'three');


class Foo {
  serialize() { return '[Foo]'; }
}

class Bar {
  serialize() { return '[Bar]'; }
}

// $ExpectError
const foo: Foo = new Bar(); // Error!

Maybe Types

// @flow
function acceptsMaybeString(value: ?string) {
  // ...
}

acceptsMaybeString("bar");     // Works!
acceptsMaybeString(undefined); // Works!
acceptsMaybeString(null);      // Works!
acceptsMaybeString();          // Works!
acceptsMaybeString(12345);     // Error!

// value: string null or undefined

对象属性可选

// @flow
function acceptsObject(value: { foo?: string }) {
  // ...
}

acceptsObject({ foo: "bar" });     // Works!
acceptsObject({ foo: undefined }); // Works!
acceptsObject({ foo: null });      // Error!问号放在string前不报错
acceptsObject({});                 // Works!

函数参数可选

// @flow
function acceptsOptionalString(value?: string) {
  // ...
}

acceptsOptionalString("bar");     // Works!
acceptsOptionalString(undefined); // Works!
acceptsOptionalString(null);      // Error!问号放在string前不报错
acceptsOptionalString();          // Works!

带默认值的函数参数

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

acceptsOptionalString("bar");     // Works!
acceptsOptionalString(undefined); // Works!
acceptsOptionalString(null);      // Error!
acceptsOptionalString();          // Works!

使用字面文字作为类型

// @flow
function acceptsTwo(value: 2) {
  // ...
}

acceptsTwo(2);   // Works!
// $ExpectError
acceptsTwo(3);   // Error!
// $ExpectError
acceptsTwo("2"); // Error!

Union Types

// @flow
function getColor(name: "success" | "warning" | "danger") {
  switch (name) {
    case "success" : return "green";
    case "warning" : return "yellow";
    case "danger"  : return "red";
  }
}

getColor("success"); // Works!
getColor("danger");  // Works!
// $ExpectError
getColor("error");   // Error!

Mixed Types

function stringifyBasicValue(value: string | number) {
  return '' + value;
}

A type based on another type

function identity<T>(value: T): T {
  return value;
}

An arbitrary type that could be anything

function getTypeOf(value: mixed): string {
  return typeof value;
}

Any Types

// @flow
function add(one: any, two: any): number {
  return one + two;
}

add(1, 2);     // Works.
add("1", "2"); // Works.
add({}, []);   // Works.

变量类型 将类型添加到变量声明 const let var

// @flow
const foo /* : number */ = 1;
const bar: number = 2;

var fooVar /* : number */ = 1;
let fooLet /* : number */ = 1;
var barVar: number = 2;
let barLet: number = 2;

let

let foo: number = 1;
foo = 2;   // Works!
// $ExpectError
foo = "3"; // Error!

重新分配变量

let foo = 42;

if (Math.random()) foo = true;
if (Math.random()) foo = "hello";

let isOneOf: number | boolean | string = foo; // Works!

重新分配变量确定变量类型

// @flow
let foo = 42;
let isNumber: number = foo; // Works!

foo = true;
let isBoolean: boolean = foo; // Works!

foo = "hello";
let isString: string = foo; // Works!

react

import * as React from 'react';

type Props = {
  foo: number,
  bar?: string,
};

type State = {
  count: number,
};


class MyComponent extends React.Component<Props> {
  state = {
    count: 0,
  };
  render() {
    this.props.doesNotExist; // Error! You did not define a `doesNotExist` prop.

    return <div>{this.props.bar}</div>;
  }
}

<MyComponent foo={42} />;

想了解更多用法，可移步flow官方文档：flow.org

此篇笔记已收录 个人笔记，感谢阅读，欢迎star鼓励