一、JavaScript静态类型检查器

11/30/2020 Tools

# 一、JavaScript静态类型检查器

# Flow概述

w3cschool-flow官方参考文档 (opens new window)

FlowJavaScript的静态类型检查器,是通过静态类型推断实现类型检查的。是2014年由FaceBook推出的一款工具,使用它就可以弥补JavaScript弱类型带来的一些弊端。可以说它为JavaScript提供了更完善的类型系统。在ReactVue的项目中,都看到Flow的使用。

JavaScript本身是动态类型检查的语言,代码在执行的过程中检查类型是否正确,C#Java都是静态类型检查,在代码编译的时候检查类型是否正确。使用flow就可以让JavaScript有像C#Java一样的开发体验。

通过在代码中添加注解的方式,标记每个变量或者参数是什么类型的,然后Flow根据这些注解就可以检查代码异常,从而实现在开发阶段类型异常的检查。

  • 参数的冒号称为类型注解,在发布的时候会通过Babel将注解消除,所以生产环境不会产生影响。
  • 不要求所有的变量和参数都加注解,不加的为any类型。
function sum (a: number, b: number) {
    return n * n
}

sum(100, 50)
sum('100', 50) // 可以检测异常
1
2
3
4
5
6

# Flow VS. TypeScript

FlowTypeScript都是静态类型检查器,TypeScript的功能更加强大,但他们都是JavaScript的超集,基于JavaScript,最终都要编译成JS运行。一般大型项目都需要静态类型检查来确保代码的可维护性和可读性,Vue2.0的源码引入了flowflow可以让代码在最小改动的情况下使用动态类型检查,而在Vue3.0中已经使用TypeScript开发了。

# Flow安装

npm flow-bin (opens new window)

npm init -y

npm i flow-bin --dev
1
2
3

可以在node_modules.bin目录中看到flow,我们可以在命令行中执行flow,作用就是项目中检查代码中类型异常。

更新时间: 2021-09-15 12:03