js 类型和检查Flow

解决JavaScript自由类型的不足
强类型与弱类型（类型安全）
- 强类型语言层面限制实参类型与形参类型必须相同
  - 有更强的类型约束
  - 不允许任意的数据隐式类型转换
  - 编译阶段就会报类型错误
- 弱类型在语言层面不会限制实参类型
  - 几乎没有类型约束
  - 允许任意的数据隐式类型转换
  - 在运行的时候代码判断
静态类型与动态类型（类型检查）
- 静态类型
  - 一个变量声明时它的类型就是确定的，不允许修改
  - 变量有类型
- 动态类型
  - 在运行阶段才明确一个变量的类型，变量的类型也可以变化
  - 变量是没有类型的，变量中存放的值有类型
JavaScript 弱类型且动态类型
- 任性，几乎没有任何类型限制
- 缺失了类型系统的可靠性
- 为什么不设计类型系统、
  - 早期的JavaScript应用简单
  - 脚本语言，不需要编译。没有编译环节
弱类型的问题
- 在执行的时候才会知道错误。隐患
- 类型不确定函数方法可能会带来期望外的结果
- 用索引器给对象加属性，会自动转为字符串
强类型的优势
- 错误更早的暴露在编码阶段语言本身就会报错
- 代码更智能，编码更准确
- 重构会更加牢靠一旦对象属性名变化，编译阶段可以定位使用到此属性的位置错误。
- 减少不必要的类型判断
Flow
- JavaScript 的类型检查器可以弥补一些JavaScript 弱类型带来的弊端。
- 在代码当初通过添加类型注解的方式表明参数变量的类型
  - function sum (a:number,b:number) :+类型就是类型注解
  - 在生产环境会去掉。。
  - 不必为每一个变量加注
```
1.下载flow
2.初始化flow配置文件
3.在flow检测的文件 添加 //@flow
4.在代码加上类型检测
5.启动flow
```
Flow 编译移除注解
- 1.官方工具 flow-remove-types
- 2.@babel/core @babel/cli @babel/preset-flow
Flow开发工具插件
- Flow Language Support
Flow类型判断
- 根据代码使用去推断类型
Flow类型注解 ```javascript let num:number = 100 function foo():number{} //返回值类型函数没有返回值默认返回undefined 返回值类型标记为:void


- Flow原始类型
   - js原始数据类型 string boolern  number（存放NaN和infinity） null  symbol  存放undefined用void
- Flow数组类型
   - 1.Array 需要泛型参数<number> 
   - 2.array:number[] = [1,2,3]
   - 元组  :[string,number] 固定长度的数组
- Flow对象类型
```javascript
const obj1:{foo:string,bar:number} ={
    foo:'nihao',
    bar:100
}//必须foo ,bar 加?可有可无 
//动态限制
const obj:{[string]:string} = {}

Flow函数类型
- 限制存放函数类型 ```javascript function foo(callback:(string,number)=>void){ callback(‘string’,100) } foo(function(str,n){

})


- Flow特殊类型
   - 字面量类型
```javascript
const a:'foo' = 'f00' //a只能是'foo'
一般联合使用 a |b |c
type StringOrNumber = string |number //type声明一个类型
//Maybe类型
const gender:?number = null //在类型前加? 相当于扩展了 null 和undefined

Mixed 和 Any
- Mixed 所有类型的联合
- Any 也是
- 区别mixed内部也是强类型会验证类型和any内部是弱类型主要是兼容性
Flow运行环境api
- 会提供浏览器Api类型限制比如getElementById 必须是字符串

js 类型 和 检查Flow