超越 TypeScript，Flow 强势回归，语法高仿 TS，功能更丰富，类型更安全！

👇 今日要闻

打破信息壁垒，走近全球前端。Hello World 大家好，我是林语冰。

Flow 是一门类型化的 JS 方言，起初是脸书内部的闭源项目，开源后成为 TypeScript 的宿敌，还被 GitHub 第一 UI 库 React 大规模采用。

后来，多边合作的 TS 在静态类型领域脱颖而出，去年更是找到了 AI 时代的风口，直接登顶 GitHub 第一编程语言。

打不过就加入，现在，新版 Flow 强势回归，语法上成为了 TS，类型上质疑了 TS，功能上又超越了 TS。

此外，Flow 重做了官网，推出面向 TS 用户的综合指南，和 TS 全面对比。

本期我们就一起来看看语法神似 TS 的 Flow，为何比 TS 更类型安全，又能否启发 TS 的再进化。

新版 Flow 的大多数语法和 TS 高度相似，TS 爱好者可以秒懂 Flow。

举个栗子，Flow 中的类型、变量和函数写法如下：

是不是很眼熟？虽然这是 Flow 常用的基本代码，但语法和 TS 惊人地相似，甚至如果你把这段代码靠背到 .ts 文件中，你会发现 TS 编译器允许 Flow 代码顺利编译，不会报错。

注意，这并不是说 Flow 的目的是 100% 兼容 TS，下文我们会探讨 Flow vs TS 的若干异同点。

但是，这确实是 Flow 从起初质疑 TS 到打不过就加入，然后理解 TS、成为 TS，最终甚至试图超越 TS 的战略路线。

Flow 的天才之处在于，它的高仿语法和 TS 大同小异，这种廉价的学习成本使得 TS 用户丝滑迁移到 Flow 成为可能。

Flow 和 TS 不同的一点在于，Flow 和 React 都起源于脸书，React 自然成为了 Flow 的重度用户。

新版 Flow 更进一步，为 React 提供了专属语法：

举个栗子，用 Flow 独有的语法来编写 React 组件：

可以看到，Flow 的诞生背景和 React 生态的深度互动，促使 Flow 有能力提供专属 React 的一流支持，这是 TS 所缺失的、或职责之外的功能。

这是一把双刃剑，一方面 React 专属语法可以吸引 React 用户从 TS 迁移到 Flow 生态，享受更棒的类型福利；另一方面，非 React 用户并不需要这些特定功能。

考虑到 React 专有语法是一种可插拔的灵活功能，开发体验影响不大，其他框架的用户可以按需选用，不会增加学习成本，或增加现有项目的技术债务。

某些情况下，即使通过 TS 严格模式的类型检查，代码在运行时也会崩溃。为了捕获这些运行时故障，Flow 优化了 TS 类型系统的四种用例。

TS 允许通过间接赋值的方式，给对象传递接口约束的额外属性，比如：

TS 允许将类型放宽的值写入类型收窄的可变数组中，比如：

TS 不会验证类型守卫的函数体逻辑，比如：

TS 中，从实例中提取方法会丢失 this 绑定：

可以看到，虽然 Flow 整体语法高仿 TS，但对于部分运行时可能出错的行为，Flow 采取了更加激进的检查策略，确保用户在编写代码时就能及时修正。

除了对 React 的一流支持和对 TS 类型系统的修正，Flow 还新增了 match 表达式语句，用于模式匹配。

举个栗子，数据库常见的增删改查操作：

模式匹配是函数式编程语言中的常见功能，Flow 大胆地将其引入。

相较之下，TS 的策略就稍显保守，因为 TS 的底线是成为 JS 的"严格超集"。

如果要在 TS 也引入模式匹配的功能，那么不能只考虑类型系统的设计，还要直接到 TC39 推动相关提案，确保模式匹配被 JS 标准化，TS 才会果断支持。

新版 Flow 强势回归，重做了官网，语法成为"山寨版 TS"的同时，功能上还试图超越 TS。

作为 React 的核心技术，新版 Flow 的变化如下：

👍 以上就是本期《前端日报》的全部内容了，如果读完对你有所帮助，可以按赞打卡、在看推荐或转发分享本文。

🙏 已经关注我的粉丝们，我们下期再见啦，掰掰~~

👇 参考文献：