preface

FLOW IS A STATIC TYPE CHECKER FOR JAVASCRIPT.

JavaScript, as a dynamically typed language, has its own flexibility, which is great.

But in recent years, with the rapid development of the front end, this flexibility has become a burden for large application scenarios.

Once the code becomes very large, variable value types are not conducive to code maintenance and iteration.

In order to solve this problem, we need to type annotations (or annotations) to ensure that developers understand the logic of the code and avoid unnecessary errors.

Of course, these annotations are only seen by the developer at development time; after being packaged into production code, they are not needed because these types of annotations are not recognized by the ECMAScript standard.

Flow checks code through type annotations to ensure the accuracy and stability of value types in code, improve performance, and facilitate maintenance.

I. Use of Flow

  1. Create a new folder and go inside, initialize package file,yarn init --yes
  2. Add the flow command,yarn add flow-bin --dev
// @flow

function sum (a: number, b: number) {
    return a + b;
}
Copy the code

By default, vscode checks js syntax for a and b to be invalid. Solution: Turn off JavaScript Validate

  1. To turn off JavaScript Validate, enter JavaScript Validate in the File > Preferences > Settings > Input box and deselect the check box
  2. Start flow, check the type,yarn flow(Note: to do this, you need to generate a flow configuration file,yarn flow init)
  3. Start in terminal,yarn flowTo check the type, the terminal can see the result report. (If an error occurs, it prints the result at the terminal; If there are No errors, it will tell you No errors!)

Automatically remove type annotations from source code

Solution 1: Flow

  1. yarn add flow-remove-types --dev
  2. yarn flow-remove-types ./src -d dist(./ SRC is the location of the file to check, dist is the location of the packaged file with the type annotation removed.)

Plan two: Babel

  1. yarn add @babel/core @babel/cli @babel/preset-flow --dev
  2. Add configuration files to the root directory..babelrc
// .babelrc
{
	"presets": ["@babel/preset-flow"]}Copy the code
  1. Run the command,yarn babel src -d dist

Type detection plug-in

Here are two plug-ins that can detect and prompt code in real time, without compiling it. The second plug-in is recommended here, the first one just didn’t work.

  • Flow Language Support
  • vscode-flow-ide

Find and install vscode in the plug-in library, try to write an error case, the plug-in will have an error.

Four, type detection

1. Type annotations

/* * Type annotation * @flow */

// Parameter type annotation
function square (n: number) {
  return n * n;
}

// Variable type annotations
let num: number = 100;
// num = '100';

// The function returns a value type annotation
function foo () :number {
  return 100;
  // return '100';
}

// The function returns no value by default, undefined, annotated as void
function bar () :void {}Copy the code

2. Primitive types

/* * Primitive type * @flow */

const a: string = 'string';

const b: number = Infinity; // NaN // 100

const c: boolean = true; // false

const d: null = null;

const e: void = undefined;

const f: symbol = Symbol(a);Copy the code

3. Array types

/* * Array type * @flow */

// Array
      
        indicates that this is an Array consisting entirely of numbers
      
const arr1: Array<number> = [1.2.3];

const arr2: number[] = [1.2.3];

// Arrays of fixed size and type are called tuples
const foo: [string.number] = [' '.123];
Copy the code

4. Object type

/* * Object type * @flow */

const obj1: { foo: string.bar: number } = {
  foo: 'str'.bar: 123
}

// Foo members are optional
constobj2: { foo? :string.bar: number } = {
  bar: 123.// kk: '123'
}

// Control the key value type
const obj3: { [string] :string } = {};
obj3.key1 = 'value1';
obj3.key2 = 'value2';
obj3.key3 = 'value3';
Copy the code

5. Function types

/* * Function type * @flow */

function foo (cb: (string.number) = >void) {
  cb('string'.100);
}

foo(function (str, n) {
  //
})
Copy the code

6. Special types

/* * Special type * @flow */

const a: 'foo' = 'foo';

// Union type
const type: 'success' | 'warning' | 'danger' = 'success';

type StringOrNumber = string | number;

const b: StringOrNumber = 'string';

// ----------------------------

/ / maybe type
const gender: ?number = undefined;
/ / equivalent to the
const gender2: number | void | null = undefined;
Copy the code

7. Any type

/* * Mixed any * @flow */

// Mixed strong type
function passMixed (value: mixed) {
  if (typeof value === 'string') {
    value.slice(1)}if (typeof value === 'number') {
    value * value
  }
}
passMixed('str');
passMixed(123);


// any weak type (compatible with old syntax)
function passAny (value: any) {
  value.slice(1)

  value * value
}
passAny('str');
passAny(123);
Copy the code