新手入门typeScript

强类型与弱类型（类型安全）

• 强类型不允许随意的隐士类型转换，而弱类型是允许的
• 变量类型允许随时改变的特点，不是强弱类型的差异

静态类型与动态类型（类型检查）

• 静态类型：一个变量声明时它的类型就是明确的，如果声明后，它的类型就不允许修改。
• 动态类型：运行阶段才能够明确变量类型，而且变量的类型随时可以改变。

JavaScript 自有类型系统的问题

• 任性：缺失了类型系统的可靠性
• javaScript没有编译环节，初期发展就设计成弱类型、动态类型语言
• 大规模应用下，这种优势也是劣势

弱类型的问题

• • 君子约定有隐患，强制要求有保障
• 强类型的优势
  • 错误更早暴露
  • 代码更只能，编程更准确
  • 重构更牢靠
  • 减少不必要的类型判断

Flow静态类型检查方案 (工具)

• 参数-> 类型注解
• 使用-> yarn add flow-bin --dev
• flow编译移除注解-> yarn add flow-remove-types --dev
  • yarn flow-remove-types src -d dist
• 使用babel代替flow工具
  • yarn add @babel/core @babel/cli @babel/preset-flow --dev
  • 项目中引入.babelrc 文件{“presets”: ["babel/preset-flow"]}
  • yarn babel src -d dist
• vscode插件：flow-language-support 开箱即用
• flow官网支持的编辑器 https://flow.org/en/docs/editors
• flow 类型推断
  • 建议手动添加类型注解
  • 原始类型

    • const a: string = 'aax';
      const b: number = Infinity;
      const c: boolean = false;
      const d: null = null;
      const e: void = undefined;
      const f: symbol = Symbol();

  • 数组类型

    • const arr1: Array<number> = [1,2,3];
      
      const arr2: number[] = [1,2,3];
      
      // 元组  数组长度固定
      const arr3: [string, number] = ['hello', 123]

  • 对象类型

    • 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 = 100

• • 函数类型

    • function foo(callback: (string, number) => void) {
        callback(string, 100)
      }

  • 字面量类型

    • const type: 'success' | 'warning' | 'danger' = 'success'
      
      type StringOrNumber = string | number
      
      const b: StringOrNumber = 'string' // 100
      
      const gender: ?number = null // undefined
      
      const gender2: number | null | void = null

  • mixed与any类型
    • 都是指定了任意类型，但是any是弱类型（主要是兼容老代码用的，实际项目中不建议使用），mixed是强类型。执行阶段会非法校验

类型手册：https://www.saltycrane.com/cheat-sheets/flow-type/latest/

运行环境API 对象