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.
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.
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'; // 重新赋值
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); // 3Maybe (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); // okMixed type refers to any data type
// @flow let hello: mixed; // 声明一个 mixed 类型的变量 hello = 'hello'; // 赋值 hello = 'hi'; // 重新赋值 hello = 12; // 重新赋值 hello = undefined; // 重新赋值 hello = null; // 重新赋值
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.
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 # 检查指定文件
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.
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); // 3Transcoded file
// 定义一个 '两个数字参数，返回值也是数字' 的函数
function plus(a, b) {
return a + b;
}
plus(); // 报错
plus(1); // 报错
plus('hello'); // 报错
plus('hello', ' hi'); // 报错
plus({}, {}); // 报错
plus(1, 2); // 3Generally, 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); // 3After 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); // 3At 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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
