TypeScript 和 Flow 有什么区别

你有没有试过写代码时，明明觉得逻辑没问题，运行后却因为一个不小心写错的变量类型，卡了半小时？比如把“用户年龄”写成字符串，结果算平均年龄时直接变成了奇怪的结果。这时候，代码检查工具就能帮大忙，而TypeScript和Flow就是这类工具里最常用的两个“选手”。

不过很多人刚接触它们时，会觉得“不都是给JS加类型的工具吗？”，其实它们从“出身”到用法，差别还真不小。

出身：一个自带buff，一个半路出家

先说说TypeScript，它是微软2012年推出的，相当于从一开始就设计成“JS的超集”——简单说就是“JS是啥样，它就兼容啥样”，你写的JS代码直接就能用，不用改。比如你平时写let name = "小明"，TypeScript能自动识别name是字符串，不用额外加声明。

而Flow是Meta（原Facebook）2014年做的，算是“半路加入”的工具，它本来就是给JS加类型检查的，一开始需要手动给代码加类型注解，比如要声明name: string，不然它不会自动猜。直到后来的版本才慢慢支持自动推断，但还是不如TypeScript那么“省心”。

学习成本：一个像学新语言，一个像加小注释

假设你要写一个计算商品总价的函数，两个工具的写法就差很多。

用TypeScript的话，你可以直接写JS的函数，要是想明确参数和返回值的类型，再加个小注解就行：

`typescript

// 给单价和数量都声明是数字，返回值也是数字

function calcTotal(price: number, count: number): number {

return price * count;

}

`

就算你不加，TypeScript也能从price*count自动推断出这俩是数字，写错类型时直接给你标红提示，不用特意记复杂规则。

但Flow就不同了，早期版本必须加// @flow的头声明，还要把类型注解写得更细，比如：

`javascript

// 开头必须加，告诉Flow要检查这段代码

// @flow

function calcTotal(price: number, count: number): number {

return price * count;

}

`

要是漏了// @flow，Flow直接“不干活”，连基本的变量类型都不检查，刚上手的新手很容易踩这个坑。

适用场景：一个大项目适配好，一个小项目更轻便

要是你做的是大项目，比如团队协作的电商后台，TypeScript的优势就出来了。它的类型系统更完善，能检查出很多复杂的问题，比如你把“商品ID”的数字不小心改成了字符串，它会立刻提醒你。而且它有配套的工具链，和React、Vue这些框架都能完美结合，团队里不管谁写代码，规范都统一，没人会觉得“看不懂别人的类型注解”。

而Flow更适合小项目，比如个人做的小工具、测试脚本，或者本来就是纯JS的老项目。它不需要你把整个项目改成TypeScript的格式，只要在需要检查的文件里加// @flow就行，不会给小项目增加太多负担。比如你写个自动整理相册的小脚本，用Flow检查一下变量类型，不用把整个代码重构一遍，省时间又省心。

其实TypeScript和Flow没有绝对的好坏，就看你用在什么地方。大项目要稳定、省协作成本，选TypeScript；小项目要轻便、不用大改代码，选Flow就够了。