Flow 静态类型检查

约 774 字大约 3 分钟

2025-06-25

浅尝辄止

目前也就 Facebook 内部在用，React 项目也支持。Flow 和 TypeScript 的类型检查的相似度还是比较高的，因此多数公司都选择 TypeScript，了解一下就行了，没有必要深入学习。

Flow 是 Facebook 开发的 JavaScript 静态类型检查工具，它可以在代码运行前发现类型错误，提高代码质量和开发效率。

核心特性

1、渐进式类型系统

// @flow
function add(a: number, b: number): number {
  return a + b;
}
add(1, 2); // ✅ 正确
add("1", "2"); // ❌ Flow 会报错

通过 // @flow 、/* @flow */ 注释开启检查
可逐步添加类型，无需一次性改造整个项目

2. 类型推断

// @flow
const num = 42; // Flow 自动推断为 number 类型
const str = "hello"; // 自动推断为 string

二、基础类型注解

1. 原始类型

// @flow
const a: number = 42;
const b: string = "hello";
const c: boolean = true;
const d: null = null;
const e: void = undefined;

2. 复合类型

// @flow
const arr: Array<number> = [1, 2, 3];
const tuple: [number, string] = [1, "two"];

type Person = {
  name: string,
  age: number,
  isAdmin?: boolean, // 可选属性
};

const user: Person = {
  name: "Alice",
  age: 30,
};

三、高级类型特性

1. 联合类型

// @flow
type Result = "success" | "error";

function handleResult(result: Result) {
  switch (result) {
    case "success":
      /*...*/ break;
    case "error":
      /*...*/ break;
    default:
      (result: empty); // Flow 会确保所有情况已处理
  }
}

2. 泛型

// @flow
function identity<T>(value: T): T {
  return value;
}

const num: number = identity(42);
const str: string = identity("hello");

3. 类型细化（%checks）

// @flow
function isString(value: mixed): boolean %checks {
  return typeof value === "string";
}

function concat(a: mixed, b: mixed): string {
  if (isString(a) && isString(b)) {
    return a + b; // Flow 知道 a 和 b 都是 string
  }
  return "";
}

四、React 集成

1. 组件 Props 类型检查

// @flow
import * as React from "react";

type Props = {
  name: string,
  age: number,
  onPress: () => void,
};

class MyComponent extends React.Component<Props> {
  render() {
    return <div>{this.props.name}</div>;
  }
}

2. 状态类型

// @flow
type State = {
  count: number,
  isLoading: boolean,
};

class Counter extends React.Component<{}, State> {
  state = {
    count: 0,
    isLoading: false,
  };
}

五、配置与使用

1. 安装

npm install --save-dev flow-bin

2. 初始化配置

npx flow init

3. 常用命令

flow check      # 执行类型检查
flow status     # 启动后台检查服务
flow stop       # 停止后台服务

六、与 TypeScript 对比

特性	Flow	TypeScript
开发团队	Facebook	Microsoft
类型系统	渐进式	默认严格
配置复杂度	较低	较高
生态工具	较少	丰富
React 集成	深度优化	良好支持

七、最佳实践

逐步采用：从关键模块开始添加类型

使用类型别名：提高代码可读性

// @flow
type UserID = string;
type User = {
  id: UserID,
  name: string,
};

利用泛型：编写更通用的代码
集成到 CI：确保类型检查通过才能部署

八、常见问题解决

1. 忽略第三方库类型

.flowconfig
[ignore]
.*/node_modules/.*

2. 库类型定义

flow-typed install lodash@4.17.0

3. 强制类型转换

// @flow
const value: any = "hello";
const str: string = (value: string); // 强制转换

Flow 提供了强大的静态类型检查能力，特别适合大型 JavaScript 项目和 React 应用，能够显著减少运行时类型错误，提升代码可维护性。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24