目录Flow概述FlowVS.TypeScriptFlow安装流程使用1.在文件开头使用注释2.在代码中使用类型注解3.在package.json中添加，4.初始化流程5.执行流程命令检查6.关闭流程命令流程编译1.官网提供flow-remove-typesnpm环境yarn环境2.BabelFlow开发工具插件VSCode——FlowLanguageSupport（Flow官方提供）othereditorsFlowGrammarUsingFlowOvervieww3cschool-flow官方参考文档Flow是JavaScript静态类型检查器，通过静态类型推断实现类型检查。它是FaceBook在2014年推出的一款工具，使用它可以弥补JavaScript弱类型带来的一些劣势。可以说它为JavaScript提供了一个更完整的类型系统。Flow在React和Vue项目中都有使用。JavaScript本身就是一种动态类型检查的语言。代码在执行过程中检查类型是否正确。C#和Java都是静态类型检查，在代码编译的时候检查类型是否正确。使用Flow可以让JavaScript拥有与C#和Java相同的开发体验。通过在代码中添加注解，标记每个变量或参数的类型，然后Flow可以根据这些注解检查代码是否存在异常，从而实现在开发阶段对类型异常的检查。参数的冒号称为类型注解，在发布时会被Babel剔除，所以生产环境不会受到影响。不要求所有的变量和参数都加注解，不加的都是任意类型。functionsum(a:number,b:number){returnn*n}sum(100,50)sum('100',50)//可以检测异常FlowVS.TypeScriptFlow和TypeScript都是静态类型检查器，TypeScript的功能更强大，但都是JavaScript的超集，以JavaScript为基础，最终编译成JS运行。一般大型项目都需要静态类型检查来保证代码的可维护性和可读性。Vue2.0的源码引入了flow，允许代码以最小的改动使用动态类型检查。在Vue3.0中已经使用TypeScript开发。Flow安装npmflow-binnpminit-ynpmiflow-bin--dev在node_modules的.bin目录下可以看到flow，我们可以在命令行执行flow，作用是检查代码中的类型异常项目。Flow使用1.在文件开头使用@flow标签，这样flow会检查文件。2.在代码中使用类型注解PS：这里可以看到VSCode中会有js语法校验，需要手动关闭Settings->javascriptvalida->关闭JavaScript校验2.在package.json中添加，》scripts":{"flow":"flow"}如果是yarn，可以直接运行yarnflow，也可以不设置scripts，直接运行npxflow3.初始化flow，运行如下语句，一个.flowconfig配置文件npm会在同一目录下生成runflowinit#>TypeScript@1.0.0flowE:\professer\TypeScript#>flow"init"4.执行流命令检查npmrunflow#>TypeScript@1.0.0flowE:\professer\TypeScript#>flow#LaunchingFlowserverforE:\professer\TypeScript#Spawnedflowserver(pid=5816)#LogswillgotoC:\Users\AppData\Local\Temp\flow\EzCzBprofesserzBlagouzBTypeScript.log#监控日志会转到C:\Users\AppData\Local\Temp\flow\EzCzBprofesserzBlagouzBTypeScript.monitor_log没有错误！5.关闭流命令npmrunflowstop#>TypeScript@1.0.0flowE:\professer\TypeScript#>flow"stop"#Tryingtoconnecttoserverfor`E:\professer\TypeScript`#Toldserverfor`E:\professer\TypeScript`去死吧。等待确认...#成功杀死服务rfor`E:\professer\TypeScript`Flow编译因为flow的类型注解不是javascript的标准语法，所以不能直接运行。我们需要将代码转换成浏览器可以执行的原始JavaScript语言。所以我们可以在完成编码后删除我们添加的注释。1.官网提供flow-remove-typesnpmflow-remove-typesnpm环境1）安装npmiflow-remove-types--dev2）修改package.json中的配置#在src目录下编译后，传到distdirectory"scripts":{"flow":"flow","flowRemove":"flow-remove-typessrc/-ddist/"}3)运行npmrunflowRemove可以看到编译好的js文件dist目录下的yarn环境1）安装yarnaddflow-remove-types2）运行#第一个是指定目录，-d后面是输出目录yarnflow-remove-typessrc-ddist/2.babel1）安装yarn环境#@babel/cli我们可以直接使用babel命令完成编译#@babel/perset-flow包含我们转换流类型检查的插件yarnadd@babel/core@babel/cli@babel/perset-flownpmenvironmentnpmi@babel/core@babel/cli@babel/perset-flow--dev2)添加配置文件在同目录下添加.babelrc文件，添加配置{"presets":["@babel/preset-flow"]}3）使用yarn环境yarnbabelsrc-d在distnpm环境下，在package.json中添加"scripts":{"babel":"babelsrc/-ddist/"}运行babelnpmrunbabelFlow开发工具插件异常不会在终端显示，直接在开发工具中显示。VSCode——FlowLanguageSupport（Flow官方提供）可以直接在代码中查看和修改其他编辑器flow-editorsFlow语法使用Flow（二）——语法简单使用
