# Flow ## Flow简介 Flow 是一个针对 JavaScript 代码的静态类型检查器。它是在Facebook开发的，经常和React一起使用。 它可以让你使用特殊的类型语法来注释变量，函数和React组件，并尽早地发现错误。 ## 安装Flow 使用yarn安装 ``` yarn add --dev flow-bin yarn run flow init ``` 使用npm安装 ``` npm install --save-dev flow-bin npm run flow init ``` 然后，在 `package.json` 中添加 `flow` ```json { "scripts": { "flow": "flow", // ... } } ``` ## 从编译过的代码中剥离 Flow 语法 Flow 通过使用特殊的语法为类型注释扩展了 JavaScript 语言。 然而，浏览器并不知道这个语法，所以需要确保它不会在发送到浏览器的已编译的 JavaScript 包中结束。 如果项目是使用 `Create React App` 建立的，那么，不需要做更多的操作， `Flow` 此时已经被默认剥离。 如果不是，则需要手动配置一下: 首先安装 `babel-preset-flow` ``` yarn add --dev babel-preset-flow # yarn # npm install --save-dev babel-preset-flow # npm ``` 然后将 flow preset 加入你的 Babel 配置。打开 .babelrc 文件配置 Babel，修改为: ```json { "presets": [ "flow", "react" ] } ``` >[warning] 注意：Flow 不需要 react preset，但他们经常在一起使用。 Flow 本身就理解 JSX 语法。 ## 添加 Flow 类型注释 默认情况下， Flow 仅检查包含此批注的文件： ``` // @flow ``` 通常它被放置在文件的顶部。 尝试将其添加到项目中的某些文件中，然后运行 yarn flow 或 npm run flow 来查看 Flow 是否已经发现了一些问题。 ## 运行 Flow ``` yarn flow # yarn # npm run flow # npm ``` 如果运行成功，控制台将会输出如下信息: ``` No errors! ✨ Done in 0.17s. ``` 否则将收到报错信息。 # 参考资料 [Flow官网](https://flow.org/en/docs/getting-started/)