前端测试 - 静态类型检测（Flow， TypeScript）

静态类型检测

1.概念

先要分清楚，强类型和弱类型、静态类型和动态类型是两组不同的概念，类型强弱是针对类型转换是否显示来区分，静态和动态类型是针对类型检查的时机来区分。

静态类型语言和动态类型语言得核心区别在于，静态类型语言（statically-typed languages）会在编译时（compile time）进行类型检查，而动态语言（dynamically-typed）则是在运行时进行类型检查（runtime）

例如java中，定义一个boolean值：

boolean result = true;

这个变量就有了一个正确的类型，因为boolean类型的声明和这个变量给定的值是相符的。

在另一方面，如果你尝试这么来声明这个变量：

boolean result ＝123;

由于变量result有一个错误的类型，因此会编译失败。因为我们在之前已经明确地声明了result是一个boolean类型，所以这里的整型值123赋给了它会报错编译失败。

而在JavaScript和其他一些动态类型语言有着不同的处理方法，可以定义各种变量、方法、对象而不需要声明它的类型。他们允许上下文环境来确定数据需要被定义为什么类型，变量的类型是可以随时改变的：

var result = true;

也就是说动态类型语言中的变量类型是被“隐去”的。

这就意味着，对于写动态类型语言的程序员而言，即使代码中包含了会在运行时阻止脚本正常运行的错误类型，这段代码也可以通过编译。

在另一方面，如果一个写静态语言的程序员写了一段包含了类型错误的代码，那么除非修复这个错误，否则会一直编译失败。

2.静态类型检测的意义与好处

意义：静态类型检测有利于构建大型应用。

好处：

1.在大型应用中，由于js语言的特性，测试调试分支覆盖困难，很多代码并不能执行到，即会存在有些代码改动不会简单的体现到UI层面上。而静态类型检测能做到即使编写的代码没执行到，在编译阶段即可发现代码中的类型不匹配。

2.静态类型检测是一种数据类型上的提示和规范。对阅读代码和后期维护友好，数据格式直观。

3. TypeScript 与Flow

正式因为js没有静态类型检测，所以有些变量类型相关的问题只能在运行阶段暴漏出来。为了解决这个问题，因此有了ts ，Flow等工具库。

 

Flow 是 Facebook 开发和发布的一个开源的静态类型检查库，它允许你逐渐地向你的 JavaScript 代码中添加类型。可以在代码阶段就检测出对变量的不恰当引用。避免「undefined is not a function」之类的错误。而且由于类型固定了，在v8 上的执行效率会更高。

 

TypeScript 是微软出品的，一个会编译为 JavaScript 的超集（尽管它看起来几乎像一种新的静态类型语言），这意味着，它使用起来会感觉和 JavaScript 很像，并不难上手。因为 TypeScript 提供了很多强类型语言的功能，所以可以使得代码更健壮，编译后的代码也是针对V8 等js 引擎优化过的，所以执行效率也不会太慢。

 

不论是使用上面哪种工具，当你想要使用类型时，你会明确告诉工具哪个（些）文件需要类型检查。对于 TypeScript ，你需要将.js文件拓展名改为.ts。对于 Flow ，你需要在文件的顶部引入一段标注@flow。

一旦你声明了想要对某一个文件进行类型检查，你需要使用他们各自的语法去定义类型。这两个工具的一个区别在于，Flow 是一个类型“检查器”而不是一个编译器。TypeScript则是一个编译器。

有关 Flow 与 TypeScript 的语法，可参考官方文档自行学习。

Flow : https://flow.org/en/docs/types/functions/

TypeScript : http://www.typescriptlang.org/

3.1 搭配eslint ，tslint，语法规则和代码风格检测

ESLint 是插件化的 Javascript 代码检测工具，它可以用于检查常见的 JavaScript 代码错误，也可以进行代码风格检查，这样我们就可以根据自己的喜好指定一套 ESLint 配置，然后应用到所编写的项目上，从而实现辅助编码规范的执行，有效控制项目代码的质量。

Tslint 和 ESlint 工作方式相同，是检查TypeScript的最好选择。