Flow 学习笔记

简介: Flow 学习笔记

前言

FLOW IS A STATIC TYPE CHECKER FOR JAVASCRIPT.

JavaScript 作为一种动态类型语言,有它自己的灵活性,这很好。

但近些年来,随着前端领域的快速发展,这种灵活性对于大型的应用场景来说,反而成为一种负担。

一旦代码变得非常庞大,值的类型不固定将不利于代码的维护和迭代。

为了解决这个问题,我们是需要对代码做类型的注解(或者说标注),确保开发者明确代码逻辑,避免不必要的错误。

当然这些注解只是在开发时被开发者看到,在打包成生产代码后,就不需要注解了,因为 ECMAScript 标准中并不能识别这些类型注解。

Flow 通过类型注解来检查代码,保证代码中值类型的准确和稳定,提高性能,便于维护。

一、Flow 的使用

  1. 新建文件夹并进入,初始化 package 文件,yarn init --yes
  2. 添加 flow 命令,yarn add flow-bin --dev
// @flow
function sum (a: number, b: number) {
    return a + b;
}

这样写时,vscode 会默认检查 js 语法,a 和 b 不合法。解决办法:关闭 JavaScript Validate

  1. 关闭 JavaScript Validate,文件 > 首选项 > 设置 > 输入框中输入:javascript validate > 取消勾选
  2. 启动 flow ,检查类型,yarn flow (注意:在此之前需要生成一个 flow 的配置文件,yarn flow init
  3. 在终端中启动,yarn flow 来检查类型,终端中可以看到结果报告。(如果发生错误,它会在终端处打印结果;如果没有错误,它会告诉你 No errors!)

二、自动移除源码中的类型注解

方案一: Flow

  1. yarn add flow-remove-types --dev
  2. yarn flow-remove-types ./src -d dist (./src 是需要检查文件所在目录,dist 是移除类型注解后的打包文件所在目录。)

方案二:Babel

  1. yarn add @babel/core @babel/cli @babel/preset-flow --dev
  2. 根目录下添加配置文件,.babelrc
// .babelrc
{
  "presets": ["@babel/preset-flow"]
}
  1. 运行命令,yarn babel src -d dist

三、类型检测插件

以下有两个插件可以实现在编写代码时就会实时检测并提示,不用编译。这里推荐第二个插件,第一个刚刚实测无效。

  • Flow Language Support
  • vscode-flow-ide

在 vscode 插件库中查找并安装,尝试写一个错误的案例,插件会有提示错误。


1688218578018.png

1688218578018.png

1688218594030.png


四、类型检测

1. 类型注解

/*
 * 类型注解
 * @flow
*/
// 参数类型注解
function square (n: number) {
  return n * n;
}
// 变量类型注解
let num: number = 100;
// num = '100';
// 函数返回值类型注解
function foo (): number {
  return 100;
  // return '100';
}
// 函数没有返回值默认返回 undefined,类型注解为 void
function bar (): void {
}

2. 原始类型

/*
 * 原始类型
 * @flow
*/
const a: string = 'string';
const b: number = Infinity; // NaN // 100
const c: boolean = true; // false
const d: null = null;
const e: void = undefined;
const f: symbol = Symbol();

3. 数组类型

/*
 * 数组类型
 * @flow
*/
// Array<number> 表示这是一个全部由数字组成的数组
const arr1: Array<number> = [1, 2, 3];
const arr2: number[] = [1, 2, 3];
// 指定数组长度大小和类型 固定大小的数组叫做元组
const foo: [string, number] = ['', 123];

4. 对象类型

/*
 * 对象类型
 * @flow
*/
const obj1: { foo: string, bar: number } = {
  foo: 'str',
  bar: 123
}
// foo 成员可选
const obj2: { foo?: string, bar: number } = {
  bar: 123,
  // kk: '123'
}
// 控制键值类型
const obj3: { [string]: string } = {};
obj3.key1 = 'value1';
obj3.key2 = 'value2';
obj3.key3 = 'value3';

5.函数类型

/*
 * 函数类型
 * @flow
*/
function foo (cb: (string, number) => void) {
  cb('string', 100);
}
foo(function (str, n) {
  //
})

6.特殊类型

/*
 * 特殊类型
 * @flow
*/
const a: 'foo' = 'foo';
// 联合类型
const type: 'success' | 'warning' | 'danger' = 'success';
type StringOrNumber = string | number;
const b: StringOrNumber = 'string';
// ----------------------------
// maybe 类型
const gender: ?number = undefined;
// 等价于
const gender2: number | void | null = undefined;

7.任意类型

/*
 * 任意类型 mixed any
 * @flow
*/
// mixed 强类型
function passMixed (value: mixed) {
  if (typeof value === 'string') {
    value.slice(1)
  }
  if (typeof value === 'number') {
    value * value
  }
}
passMixed('str');
passMixed(123);
// any 弱类型 (兼容老语法)
function passAny (value: any) {
  value.slice(1)
  value * value
}
passAny('str');
passAny(123);


目录
相关文章
|
5月前
|
缓存 Shell 网络安全
将应用程序打包成Docker镜像时可能遇到哪些问题?
将应用程序打包成Docker镜像时可能遇到哪些问题?
494 77
|
JavaScript
Vue中 .env .env.development .env.production 详细说明
Vue中 .env .env.development .env.production 详细说明
532 0
|
存储 缓存 Java
面试官:你知道包装类的缓存机制吗?
面试官:你知道包装类的缓存机制吗?
1632 0
|
5月前
|
安全 前端开发 JavaScript
结合自定义 Hook 和高阶组件的最佳实践
结合自定义 Hook 和高阶组件的最佳实践
239 74
|
5月前
|
缓存 前端开发 Java
在 React 中,组合组件和高阶组件在性能方面有何区别?
在 React 中,组合组件和高阶组件在性能方面有何区别?
220 67
|
5月前
|
缓存 Java Nacos
如何优雅上线、下线?原来 大厂应用 是这样 优雅发布的!
如何优雅上线、下线?原来 大厂应用 是这样 优雅发布的!
如何优雅上线、下线?原来 大厂应用 是这样 优雅发布的!
|
5月前
|
关系型数据库 MySQL 数据库
Docker Compose-实战
Docker Compose-实战
163 5
|
6月前
|
存储 弹性计算 数据管理
阿里云OSS对象存储收费标准价格表:流量包+存储包2025最新整理
阿里云OSS对象存储2025收费标准及请求费用等,提供按量付费与包年包月两种模式。标准型本地冗余存储按量价为0.09元/GB/月,包年包月如500GB仅118.99元/年。流量费仅收公网出方向,闲时0.25元/GB、忙时0.5元/GB。更多详情见官网。
2723 2
|
IDE 算法 Java
通义灵码企业级能力全面升级
本指南介绍如何使用通义灵码企业版提升代码质量和效率。首先,需注册并登录通义灵码企业版及 IDE 插件,下载本地工程和知识库压缩包,创建企业知识库并上传文档和代码。随后,可通过开启检索增强功能体验基于企业规范的代码风格优化、前端组件代码补全及后端算法函数生成等功能,显著提高开发效率和代码质量。
384 2
|
SQL 存储 Java
实时数仓 Hologres操作报错合集之在尝试访问DataHub时,报错连接超时,该怎么处理
在使用阿里云实时数仓Hologres时,可能会遇到不同类型的错误。例如:1.内存超限错误、2.字符串缓冲区扩大错误、3.分区导入错误、4.外部表访问错误、5.服务未开通或权限问题、6.数据类型范围错误,下面是一些常见错误案例及可能的原因与解决策略的概览。