Flow（一）—— JavaScript静态类型检查器

目录

• Flow概述
• Flow VS. TypeScript
• Flow安装

• Flow使用

  • 1.在文件开头要使用注释
  • 2.在代码中使用类型注解
  • 3.在package.json中添加，
  • 4.初始化flow
  • 5.执行flow命令进行检查
  • 6.关闭flow命令

• Flow编译

  • 1.官网提供flow-remove-types

    • npm环境
    • yarn环境
  • 2.Babel

• Flow开发工具插件

  • VSCode —— Flow Language Support（Flow 官方提供的）
  • 其他的编辑器
• Flow语法使用

Flow概述

w3cschool-flow官方参考文档

Flow是JavaScript的静态类型检查器，是通过静态类型推断实现类型检查的。是2014年由FaceBook推出的一款工具，使用它就可以弥补JavaScript弱类型带来的一些弊端。可以说它为JavaScript提供了更完善的类型系统。在React和Vue的项目中，都看到Flow的使用。

JavaScript本身是动态类型检查的语言，代码在执行的过程中检查类型是否正确，C#和Java都是静态类型检查，在代码编译的时候检查类型是否正确。使用flow就可以让JavaScript有像C#和Java一样的开发体验。

通过在代码中添加注解的方式，标记每个变量或者参数是什么类型的，然后Flow根据这些注解就可以检查代码异常，从而实现在开发阶段类型异常的检查。

• 参数的冒号称为类型注解，在发布的时候会通过Babel将注解消除，所以生产环境不会产生影响。
• 不要求所有的变量和参数都加注解，不加的为any类型。

function sum (a: number, b: number) {
    return n * n
}

sum(100, 50)
sum('100', 50) // 可以检测异常

Flow VS. TypeScript

Flow与TypeScript都是静态类型检查器，TypeScript的功能更加强大，但他们都是JavaScript的超集，基于JavaScript，最终都要编译成JS运行。一般大型项目都需要静态类型检查来确保代码的可维护性和可读性，Vue2.0的源码引入了flow，flow可以让代码在最小改动的情况下使用动态类型检查，而在Vue3.0中已经使用TypeScript开发了。

Flow安装

npm flow-bin

npm init -y

npm i flow-bin --dev

可以在node_modules的.bin目录中看到flow，我们可以在命令行中执行flow，作用就是项目中检查代码中类型异常。

Flow使用

1. 在文件开头要使用注释

@flow的标记，这样flow才会检查这个文件。

2. 在代码中使用类型注解

PS: 这里看到VSCode中会有js的语法校验，需要手动关闭

设置 -> javascript valida -> 关闭JavaScript验证

2. 在package.json中添加，

"scripts": {
    "flow": "flow"
}

如果是yarn直接运行yarn flow即可，也可以不设置scripts直接npx flow运行

3. 初始化flow

运行下面的语句，会再同级目录下生成一个.flowconfig的配置文件

npm run flow init

# > TypeScript@1.0.0 flow E:\professer\TypeScript
# > flow "init"

4. 执行flow命令进行检查

npm run flow

# > TypeScript@1.0.0 flow E:\professer\TypeScript
# > flow

# Launching Flow server for E:\professer\TypeScript
# Spawned flow server (pid=5816)
# Logs will go to C:\Users\AppData\Local\Temp\flow\EzCzBprofesserzBlagouzBTypeScript.log
# Monitor logs will go to C:\Users\AppData\Local\Temp\flow\EzCzBprofesserzBlagouzBTypeScript.monitor_logNo errors!

5. 关闭flow命令

npm run flow stop

# > TypeScript@1.0.0 flow E:\professer\TypeScript
# > flow "stop"

# Trying to connect to server for `E:\professer\TypeScript`
# Told server for `E:\professer\TypeScript` to die. Waiting for confirmation...
# Successfully killed server for `E:\professer\TypeScript`

Flow编译

因为flow的类型注解不是javascript的标准语法，所以不能直接运行。我们需要将代码转换成浏览器可以执行的原始的JavaScript语言运行。所以我们可以在完成编码过后，移除掉我们添加的注解。

1. 官网提供flow-remove-types

npm flow-remove-types

npm环境

1) 安装

npm i flow-remove-types --dev

2) package.json中修改配置

# 把src目录下的编译之后转到dist目录下
"scripts": {
    "flow": "flow",
    "flowRemove": "flow-remove-types src/ -d dist/"
}

3) 运行

npm run flowRemove

可以看到在dist目录下有了编译之后的js文件

yarn环境

1) 安装

yarn add flow-remove-types

2) 运行

# 第一个是指定目录，-d 之后是输出目录
yarn flow-remove-types src -d dist/

2. Babel

1) 安装

yarn环境

# @babel/cli我们可以直接使用babel命令完成编译
# @babel/perset-flow包含了我们转换flow类型检查的插件
yarn add @babel/core @babel/cli @babel/perset-flow

npm环境

npm i @babel/core @babel/cli @babel/perset-flow --dev

2) 添加配置文件

同级目录添加.babelrc文件，添加配置

{
  "presets": ["@babel/preset-flow"]
}

3) 使用

yarn环境

yarn babel src -d dist

npm环境

在package.json中添加

"scripts": {
    "babel": "babel src/ -d dist/"
}

运行babel

npm run babel

Flow开发工具插件

异常不在终端显示，开发工具中直接显示。

VSCode —— Flow Language Support（Flow 官方提供的）

可以在代码中直接看到并修改

其他的编辑器

flow-editors

Flow语法使用

Flow（二）—— 简单语法使用