浅谈 TypeScript【上】-- Flow 静态类型检查工具

文章内容输出来源：拉勾教育 大前端高薪训练营

前言

在【编程语言分类】中，我介绍到JavaScript是一种类型不安全语言，没有明确的数据类型声明，变量的类型可以随意的更改。为了解决这种问题，微软开发了一种开源、跨平台的编程语言TypeScript。它是JavaScript的超集，最终会被编译为JavaScript代码。在学习TypeScript之前，我们先来看一个JavaScript的类型检查器Flow。

Flow

Flow 是 Facebook 出品的一个用于 JavaScript 代码的静态类型检查工具。用于找出 JavaScript 代码中的类型错误。Flow 采用 OCaml 语言开发。

注意：
在使用 Flow 时，需关闭开发工具(如VScode)中关于JavaScript的语法检查。

一、Flow 的安装与使用

• 以下操作需在 cmd 命令行界面进行，并使用 yarn (或 npm/cnpm)执行安装运行命令。

  1）初始化包管理文件 package.json

  yarn init -y       
  

  2）安装 flow 检查依赖包

  yarn add flow-bin --dev 
  

  3）初始化配置文件 .flowconfig

  yarn flow init 
  

  4）类型注解： // @flow 或 / @flow /

  // @flow
  function sum (a: number, b: number) {
      return a + b
  }
  sum(100, 100)
  // sum('100', 100)
  

  5）启动 Flow检查服务

  yarn flow   
  

  注意
  安装目录中不要出现中文，否则会报出如下错误：
  6）关闭 Flow检查服务

  	yarn flow stop
  

二、编译：通过编译移除 [类型注解]

1. 使用flow官方提供的 flow-remove-types
   1）安装 flow-remove-types

   yarn add flow-remove-types --dev
   

   2）运行编译命令

   yarn flow-remove-types 源代码所在目录  -d 转换过后的输出目录
   

2. 使用 Babel 转换器
   1）安装 babel

   /*
      @babel/core ：Babel 的核心模块
      @babel/cli：Babel的cli工具，可以使我们在命令行工具中直接使用Babel命令完成编译
      @babel/preset-flow：包含了转换类型注解的插件                        
   */
   yarn add @babel/core @babel/cli @babel/preset-flow --dev 
   
   

   2）在根目录中添加 babel 的配置文件 .babelrc，并使用 presets 字段设定转码规则

    {
        "presets": ["@babel/preset-flow"]
    }
   

   3）运行编译命令

   yarn babel 源代码所在目录  -d 转换过后的输出目录
   

三、基本语法

1. 类型推断 (Type Inference)

   /**
    * @flow
    */
   function square (n) {
       return n * n
   }
   square('100')
   

2. 原始类型(Primitive Types)

   // @flow
   const a: string = 'foobar'
   const b: number = Infinity // NaN // 100
   const c: boolean = false // true
   const d: null = null
   // 值为 undefined 时，数据类型标记为 void
   const e: void = undefined
   const f: symbol = Symbol()
   

3. 数组类型

   // @flow
   const arr1: Array<number> = [1, 2, 3, 'foo']   // 泛型	
   const arr2: number[] = [1, 2, 3]	
   
   // 元组：一个函数中返回多个返回值时，使用
   const foo: [string, number] = ['foo', 100]
   

4. 对象类型

   // @flow
   const obj1: { foo: string, bar: number } = { foo: 'string', bar: 100 } 	
   
   const obj2: { foo?: string, bar: number } = { bar: 100 }  // ? 表示 可选	
   
   const obj3: { [string]: string } = {}   // 指定 键 和 值 的数据类型
   obj3.key1 = 'value1'
   obj3.key2 = 'value2'
   

5. 函数类型

   // @flow
   function foo (callback: (string, number)): void {
       callback('string', 100)
   }
   
   foo(function (str, n) {
       // str => string
       // n => number
   })
   

6. 特殊类型

   // @flow
   const a: 'foo' = 'foo'   // 字面量类型	
   const type: 'success' | 'warning' | 'danger' = 'success' // 联合类型：组合	
   const StringOfNumber = string | number  // 自定义类型别名	
   
   const b: StringOfNumber = 'string' // 100	
   const gender: ?number = undefined	
   // 相当于下面这种写法 
   const gender: number | null | undefined = undefined
   

7. Mixed & Any（任意类型）

   // @flow	
   // string | number | boolean | ...  // 所有类型的联合类型
   
   // 强类型，类型安全的
   function passMixed(value: mixed) {
       // 解决类型隐患
       if (typeof value === 'string') {
           value.substr(1)
       }
       if (typeof value === 'number') {
           value * value
       }
   }
   
   passMixed('string')	
   passMixed(100)
   
   // *********************************
   
   // 弱类型 兼容以前版本的ECMAScript 
   function passAny(value: any) {
       value.substr(1) // 语法上不会报错
   
       value * value
   }
   
   passAny('string')	
   passAny(100)
   

• 查询网址：
  https://flow.org/en/docs/types 对所有类型的描述文档
  https://www.saltycrane.com/cheat-sheets/flow-type/latest/ 文档查询