JavaScript extension: How to use flow static type to check and report errors

What this article brings to you is about the extension of javascript: how to use flow static types to check and report errors. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The js language is very different from Java, C series and other languages, that is, the js language is a weakly typed language. This feature of the js language may make people think that js is very free and has no mandatory constraints. However, when encountering large-scale projects, this feature of js will become more troublesome, because it will make the team's code very uncontrollable. This reason is also a very important reason for the birth of TypeScript.

But in fact, many developers still prefer to use js to develop projects, so Facebook developed flow to help the js language expand the static type checking function and avoid the problems mentioned above.

1. Code example

flow stipulates that adding // @flow comment at the beginning of the file that needs to be 'flow static type checking' allows the tool to identify that this file needs to be statically typed. Check, otherwise it will be treated as a normal js file without static type checking.

flow Static typing can be applied to almost all js objects, including es6 extended classes, modules, etc., as well as jsx syntax.

The following are some basic static type examples. For more details, please view Type Annotations | Flow.

1.1 Basic types

are similar to the basic data types of js, including:

boolean: corresponds to the Boolean type of js

number: corresponds to the Number type of js

string: corresponds to the String type of js

null: corresponds to the js null

void: corresponding to js's undefined

Normal js code

let hello = 'hello'; // 声明一个变量

hello = 2 * 2; // 重新赋值

hello = []; // 重新赋值

plus flow static type checking extended code

// @flow

let hello: string = 'hello'; // 声明一个 string 类型的变量

hello = 2 * 2; // 报错

hello = []; // 报错

hello = 'hi'; // 重新赋值

1.2 function

Normal js code

function plus(a, b) {
  return a + b;
}

plus(); // NaN
plus(1); // NaN
plus(1, 2); // 3
plus('hello'); // 'helloundefined'
plus('hello', ' hi'); // 'hello hi'
plus({}, {}); // '[object Object][object Object]'

Plus flow static type checking extended code

// @flow

// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a: number, b: number): number {
  return a + b;
}

plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3

1.3 Maybe (Maybe), Optional (Optional), Semantic (Literal), Mixed ( Mixed)

Maybe (Maybe) type is represented by a ? in front of the type, including the type itself, null, undefined

// @flow

let hello: ?string; // 声明一个数据类型可以是 string, null, undefined 的变量

hello = null; // 赋值
hello = undefined; // 重新赋值
hello = 'hello'; // 重新赋值
hello = 1; // 报错
hello = true; // 报错

Optional (Optional) type is generally used for object properties or function parameters. Add a ? after the name, including the type itself, undefined

// @flow

const obj: {hello? : string}; // 属性 hello 可以是 string, undefined

obj = {}; // 赋值
obj = {hello: undefined}; // 重新赋值
obj = {hello: 'hello'}; // 重新赋值
obj = {hello: null}; // 报错
obj = {hello: 1}; // 报错
obj = {hello: true}; // 报错

// 属性 param 可以是 number, undefined
function method(param?: number) { /* ... */ }

method(); // 正常
method(undefined); // 正常
method(1.12); // 正常
method(null); // 报错
method('hello'); // 报错

Semantic (Literal) types are generally used to declare a certain or several specific values ​​(multiple values ​​are separated by | )

// @flow

let hello: 'hello'; // 声明一个只能赋值 'hello' 的变量

hello = 'hello'; // 赋值
hello = 'hi'; // 报错
hello = 12; // 报错
hello = undefined; // 报错
hello = null; // 报错

function method(param: 1 | 'hi' | boolean): void { /* ... */ }

method(); // 报错，缺少参数
method(1); // ok
method(1.2); // 报错，类型不对
method('hi'); // ok
method('hello'); // 报错，类型不对
method(true); // ok
method(false); // ok

Mixed type refers to any data type

// @flow

let hello: mixed; // 声明一个 mixed 类型的变量

hello = 'hello'; // 赋值
hello = 'hi'; // 重新赋值
hello = 12; // 重新赋值
hello = undefined; // 重新赋值
hello = null; // 重新赋值

1.4 Composite type

Array

// @flow

let arr1: Array<boolean> = [true, false, true]; // 声明一个元素是 boolean 的数组
arr1 = [true, 1]; // 报错，1 不是 boolean 值
arr1 = ['']; // 报错，'' 不是 boolean 值

let arr2: Array<string> = ["A", "B", "C"]; // 声明一个元素是 string 的数组

let arr3: Array<mixed> = [1, true, "three"] // 声明一个元素是任意类型的数组
arr1 = [true, 1]; // 重新赋值 
arr1 = ['']; // 重新赋值

map

// @flow

// 声明一个 map 类型，其有一个名为 foo，类型 boolean 的子元素
let obj1: { foo: boolean } = { foo: true };
obj1 = {}; // 报错，缺少 foo 这个属性值
obj1 = {foo: 1}; // 报错，属性值 foo 的类型必须是 boolean
obj1 = {foo: false, bar: 'hello'}; // 重新赋值

// 声明一个 map 类型，其有名为 foo, bar, baz，类型 number, boolean, string 的子元素
let obj2: {
  foo: number,
  bar: boolean,
  baz: string,
} = {
  foo: 1,
  bar: true,
  baz: 'three',
};

For more static types, you can view Type Annotations | Flow.

2. Use tool

Installation

# 全局安装
npm i -g flow-bin

# 本地安装
npm i -D flow-bin

Use

flow init                       # 初始化项目

flow check path/to/dir          # 检查这个目录下所有的文件
flow check path/to/js/file      # 检查指定文件

3. Use it with babel

Because the flow static type is only an extension of js, it is not natively supported by js, and cannot be run directly. Therefore, flow is generally used with babel, so that static type checking can be performed when the program is running. , to achieve the effect we want.

3.1 babel-preset-flow

Install babel-preset-flow so that babel can recognize flow syntax when transcoding js files.

npm i -D babel-preset-flow

.babelrc

{
  "presets": ["flow"]
}

Source file (flow)

// @flow

// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a: number, b: number): number {
  return a + b;
}

plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3

Transcoded file

// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a, b) {
  return a + b;
}

plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3

3.2 babel-plugin-flow-runtime

Generally, the babel-plugin-flow-runtime plug-in is used in the development environment, so that the data type can be checked in real time during development, just like the native running flow static type check. (Generally, this function will not be used in the production environment, because it will consume additional js performance)

npm i -D babel-plugin-flow-runtime flow-runtime

.babelrc

{
  "presets": ["flow"],
  "plugins": ["flow-runtime"]
}

Source file (flow)

// @flow

// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a: number, b: number): number {
  return a + b;
}

plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3

After transcoding The file

import t from 'flow-runtime';


// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a, b) {
  return a + b;
}

t.annotate(plus, t.function(t.param('a', t.number()), t.param('b', t.number()), t.return(t.number())));
plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错

plus(1, 2); // 3

At this time, the js file will import the flow-runtime module and perform data type checking on the parameters a, b and return value of the plus function. If it does not meet the data definition, an error will be reported.

The above is the detailed content of JavaScript extension: How to use flow static type to check and report errors. For more information, please follow other related articles on the PHP Chinese website!