煦涵说Flow

王伟廷发布于2019-08-20 16:59 / 2113人阅读

摘要：现在已经在前端比较流行的等框架中得到使用。今天煦涵就和大家一起来学习以及在实际项目中的使用。安装这里我们选择使用，当前你也可以使用如果你对不是很了解，建议你阅读煦涵说。

Flow是Facebook出品的一个JavaScript代码的静态类型检查工具，它做了很多处理，使您的代码更快，更智能，更自信，更好的适应性。现在已经在前端比较流行的React 、Vue 等框架中得到使用。今天煦涵就和大家一起来学习Flow以及在实际项目中的使用。

Flow 安装

这里我们选择使用 yarn，当前你也可以使用 npm, 如果你对 yarn不是很了解，建议你阅读 煦涵说Yarn。首先我们先初始化一个 flow 项目，安装完编译器，然后再安装 flow 。

mkdir flow-project
cd flow-project
yarn init

yarn add --dev babel-cli babel-preset-flow babel-preset-es2015

项目根目录下创建 .babelrc 文件，并增加如下内容：

{
    "presets": ["flow", "es2015"]
}

安装 Flow:

yarn add --dev flow-bin

运行 flow：
需要在根目录下新建一个 .flowconfig 文件，不然会报找不到该文件错误。

yarn run flow

yarn run v0.16.1
$ "/flow-proj/node_modules/.bin/flow" 
Launching Flow server for /flow-proj
Spawned flow server (pid=17242)
Logs will go to /private/tmp/flow/zSvue-workspacezSflow-proj.log
No errors!
✨  Done in 2.48s.

Flow 使用

我们先在根目录下新建src目录，并新建一个index.js文件。同时在 package.json 文件中增加下面scripts内容，以方便我们后期的命令行编译。
index.js

// @flow
[1,2,3,4].map((item:number, index) => {
    return item * item;
});

package.json

"scripts": {
    "build": "yarn run flow && babel src -d lib"
}

运行 yarn run build，没有报错，会在生成lib文件目录，index.js的 flow type 注释会被 remove 掉，同时进行了箭头函数到ES5的转换。
如果我修改上面index.js的代码：

// @flow
["1",2,3,4].map((item:number, index) => {
    return item * item;
});

运行 yarn run build，会报如下类型检测错误：

yarn run v0.16.1
$ "/flow-proj/node_modules/.bin/flow" 
src/index.js:3
  3: ["1",2,3,4].map((item:number, index) => {
      ^^^ string. This type is incompatible with the expected param type of
  3: ["1",2,3,4].map((item:number, index) => {
                           ^^^^^^ number


Found 1 error
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

更多类型坚持实例不再一一列举，官网有很多介绍type的例子。

Flow 配置文件

上面提到没有配置文件，会报错，.flowconfig 文件由以下5个部分组成：

[include] --包含的文件或者目录

[ignore] --忽略的文件或者目录，支持正则匹配

[libs] --第三方库支持，项目根目录下的flow-typed目录作为库目录

[options] --默认键值对配置，某些选项可以使用命令行方式重载

[version] --期望使用的Flow版本

流行编辑器插件支持

Visual Studio Code: Flow-Language-Support

Sublime Text:Flow 和 SublimeLinter-flow

更多请参考：https://flow.org/en/docs/edit...

感谢您的阅读

--eof--

作者[煦涵]
2017年05月20日

下面是「FED实验室」的微信公众号二维码，欢迎长按、扫描关注：

混合云服务器托管煦涵说 flow open flow

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83299.html

煦涵说Babel

摘要：，下一代编译器，当前版本，它可以处理的所有新语法，并内置了扩展及类型注解支持，如果对不是很了解可以查看实验室微信公众号文章煦涵说。 Babel，下一代javascript编译器，当前版本 v2.4.0 ，它可以处理ES6的所有新语法，并内置了React JSX扩展及Flow类型注解支持，如果对Flow不是很了解可以查看FED实验室微信公众号文章煦涵说Flow。 Babel与JavaSc...

lordharrd 2019-08-20 17:00 评论0 收藏0
煦涵说JSON

摘要：对象表示法，是一种数据交换格式，能够在服务器端交换数据，年由提出，目的是取代繁琐笨重的格式。煦涵煦涵煦涵煦涵煦涵参考文档感谢您的阅读作者煦涵年月日下面是实验室的微信公众号二维码，欢迎长按扫描关注 JSON(Javascript Object Notaion, javascript 对象表示法)，是一种数据交换格式，能够在服务器端交换数据， 2001年由Douglas Crockfor...

lowett 2019-08-20 16:52 评论0 收藏0
煦涵说Yarn

摘要：是一个新的包管理器，它由开发者共同开发完成。从包管理器中借鉴，创建了文件，用来记录项目使用每个包的确切版本。感谢您的阅读作者煦涵年月日下面是实验室的微信公众号二维码，欢迎长按扫描关注 Yarn是一个新的Javascript包管理器，它由Facebook, Google, Exponent and Tilde开发者共同开发完成。Yarn 不是 NPM 的fork版本，而是它的重新设计，Y...

pkhope 2019-08-21 15:52 评论0 收藏0
煦涵说Webpack-IE低版本兼容指南

摘要：，是一个前端资源加载打包工具，现在版本已经到，今天的文章不支持介绍的及使用，而是对最近项目开发中使用打包时处理低版本及以下浏览器兼容问题做一次总结。 Webpack，Webpack 是一个前端资源加载/打包工具，现在版本已经 release 到 v2.6.1，今天的文章不支持介绍Webpack的API及使用，而是对最近项目开发中使用Webpack打包时处理IE低版本(IE8及以下)浏览...

tanglijun 2019-08-20 16:55 评论0 收藏0
flow从零开始----安装和配置

摘要：资源官网安装参考什么是是一个弱类型的解释性语言，无法在编译环节进行静态类型校验，如果想也具备静态类型检查功能。那就得使用到由推出，官网是。资源官网：https://flow.org/ 安装：https://flow.org/en/docs/inst... 参考：https://www.01hai.com/note/av... https://www.jianshu.com/p...

KoreyLee 2019-08-23 14:32 评论0 收藏0