js的类型约定--初步使用Flow小结

强类型语言与弱类型语言

• 强类型语言不允许变量隐式类型转换，而弱类型允许

静态类型语言和动态类型语言

• 是否允许随时修改变量类型

强类型语言的优势

• 错误更早暴露
• 代码更智能，编码更正确
• 重构更牢靠
• 减少不必要的类型判断

Flow

使用Flow

• 需要在使用flow的文件上添加一个//@flow
• 安装flow-bin

yarn add flow-bin --dev

• 使用方式：比如函数参数后面可以跟:number来注解是数值类型的，如果vscode报错，则可以关闭vscode的检测

去设置里搜索 JavaScript Validate:Enable 来进行启用禁用

• 通过yarn flow init 生成.flowconfig配置文件
• 然后通过yarn flow来运行就可以了

移除Flow注解

Flow自带命令

• 使用flow自带的移除命令，安装flow-remove-types

yarn add flow-remove-types --dev 

• 使用下面的语句，就会把去除过后的js文件放到dist中

yarn flow-remove-types . -d dist

babel移除方式

• 安装babel相关模块

yarn add @babel/core @babel/cli @babel/preset-flow --dev

• 添加.babelrc文件

  • 在文件中添加一个presets的配置

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

• 使用命令，完成src的文件编译到dist中

yarn babel src -d dist

vscode适配插件

• 可以通过安装flow language support 来实现vscode对flow的检测

• 其他的编辑器

Flow的注解方式

• flow可以在函数返回值，定义变量，函数参数等地方添加注解

function sum(a: number, b: number) {
  return a + b
}
let a :number = 10
function fn() :number{
  return 10
}

Flow的原始类型

// Infinity代表无穷大
const a :number =  Infinity // NaN // 10

const b :string = 'str'

const c :boolean = false // true

const d :void = undefined

const e :null = null

const f :symbol = Symbol()

Flow的数组类型

const arr1 :Array<number> = [1, 2, 3]
const arr2 :Array<string> = ['x', 'w', '2']
// 元组
const arr3 :[string, number] = ['xx', 1]

Flow的对象类型

const obj1: { foo: string, bar: number } = { foo: 'str', bar: 111 }
// foo就是可有可无的属性了
const obj2: { foo?: string, bar: number } = { bar: 111 }
// 可随意添加符合约束的键值对
const obj3: { [string]: string } = {}
obj3.key1 = 'xxx'

Flow的函数类型

// 可以通过函数签名来设置函数的约束
function foo(callback: (string, number) => void) {
  callback('str', 100)
}
foo(function(str, n) {
  
})

Flow的特殊类型

// a只能为foo字符串
const a: 'foo' = 'foo'

// 或
const type: 'success' | 'warning' | 'danger' = 'success'

// 定义类型变量，方便重用
type stringOrNumber = string | number

const b: stringOrNumber = '222'

// 下面两个是一样的, maybe类型多提供了null和void
const gender: ?number = undefined
const gender: number | null | void = undefined

Flow的任意类型

• mixed 强类型

  function passMixed(val: mixed) {
    // val.substr(1) 是不行的，因为mixed是独立的类型，必须经过判断才能使用相应的类型方法
    if (typeof val === 'string') {
      val.substr(1)
    }
    if (typeof val === 'number') {
      val * val
    }
  }
  passMixed('xxx')
  passMixed(111)
  

• any 弱类型

  • any主要是为了兼容之前的老代码，不推荐使用

  function passAny(val: any) {
    val.substr(1)
    val * val
  }
  passAny('xx')
  passAny(11)
  

Flow的所有类型

• [类型手册](