typescript解决了JavaScript类型系统的问题，提供代码的可靠程度；

一 分类

1 强类型和弱类型（类型安全的角度）
强类型语言层面限制了函数的实参类型必须和形参类型一致；
弱类型就不会限制实参的类型，运行可能有问题，但是语法不会报错；
强类型有更强的类型约束；
弱类型中几乎没有类型约束；
强类型中不允许任何的隐式类型转换；
弱类型中允许任意的隐式类型转换
2 静态类型和动态类型（类型检查的角度）
静态类型语言，一个变量声明时，它的类型就是确定的；声明过后，它的类型就不允许修改；
动态类型语言，运行阶段才能明确变量类型，而且变量的类型可以随时发生变化；动态类型语言中，变量是没有类型的，变量的值才有类型
3 弱类型语言的问题

  1. // 弱类型语言的问题
  2. // 1
  3. const foo = {};
  4. // 耗时操作后使用foo的不存在的方法
  5. setTimeout(() => {
  6.     foo.add('1');
  7. }, 1000);
  8. // 等运行完了才会报错，影响效率
  9. // 2
  10. const sum = function (a, b) {
  11.     return a + b;
  12. };
  14. console.log(sum(1,2))
  15. console.log(sum(1,'2'))
  16. // 不同类型执行的结果超乎预期，导致函数功能可能发生变化
  17. // 3
  18. const obj = {
  19.     true: 111
  20. }
  21. console.log(obj['true'])
  22. // 不同类型的key在同名情况下会重复

4 强类型的优势

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

    二 flow

    1 flow 起步
    安装 yarn add flow-bin
    初始化flow yarn flow init
    检查 yarn flow
    代码添加@flow标记
    添加参数类型
    1607918022(1).jpg
    2 flow 编译移除注解
    1>用flow-remove-types工具
    添加移除模块 yarn add flow-remove-types
    执行命令移除src下的文件注解到dist目录 yarn flow-remove-types src -d dist
    2>用babel 配合flow工具
    添加模块 yarn add @babel/core @babel/cli @babel/preset-flow
    添加babel配置 .babelrc
    1. {
    2.   "presets": ["@babel/preset-flow"]
    3. }
    执行命令 yarn babel src -d dist
    3 开发工具下的flow插件
    vscode下安装flow-langular-support插件
    就会在标注后自动错误提示
    1607925985(1).jpg
    4 flow 类型推断
    1607927539.jpg
    5 类型注解 ```javascript /**
    • 类型注解
    • @flow
    • @param {} n / function square(n: number) { return n * n; } let num: number = 100;

num = ‘1111’; // 标识错误

function foo(): number { return ‘1111’; // 标识错误 }

function foo(): number { // number下回标识错误

}

function foo(): void { // 无返回值用void类型

}

  1. 6 flow数据类型
  2. ```javascript
  3. /**
  4.  *
  5.  * @flow
  6.  *
  7.  */
  8. // 原始类型-----------------
  9. const a: string = 'jason';
  11. const b: number = Infinity; // NaN // 100
  13. const c: boolean = true; // false
  15. const d: null = null;
  17. const e: void = undefined;
  19. const f: Symbol = Symbol();
  21. // 数组类型-----------------
  22. const arr1: Array<number> = [1, 23, 3];
  24. const arr2: number[] = [1, 2, 3];
  25. // 元组
  26. const arr3: [string, number] = ['22', 3];
  28. // 对象类型-----------------
  29. const obj1: { foo: string, bar: number } = { foo: '111', bar: 11 };
  31. const obj2: { foo?: string, bar: number } = { bar: 11 };
  33. const obj3: { [string]: string } = {};
  35. obj3.key1 = '111';
  36. //  obj3.key2 = 20 // 标识出错误
  37. // 函数类型-----------------
  38. function foo(callback: (string, number) => void) {
  39.     callback('string', 100)
  40. }
  42. foo(function(str, n){
  44. })
  46. // 特殊类型-----------------
  47. // 字面量类型
  48. const aa: 'foo' = 'foo';
  49. // 联合类型
  50. const type: 'success' | 'waring' | 'danger' = 'success';
  52. const bb: string | number = 'sss' // 200
  53. // type关键词
  54. type StringOrNumber = string | number;
  56. const cc: StringOrNumber = 200;
  57. // maybe类型
  58. const gender: ?number = undefined;
  59. // 等价于
  60. const gender1: number|null|void = undefined;
  63. // mixed类型-----------------
  64. // string | number | boolean | ...
  65. function passMixed (value: mixed) {
  66.     // 语法报错
  67.     // value.substr(1);
  68.     // value* value
  69.     if(typeof value === 'string') {
  70.         value.substr(1);
  71.     }
  72. }
  74. passMixed(100)
  75. passMixed('100')
  78. // any类型-----------------
  79. // 弱类型
  80. function passAny(value: any) {
  81.     // 语法不报错
  82.     value.substr(1);
  83.     value* value
  84. }
  86. passAny(100)
  87. passAny('100')

7 flow对运行环境的API的传参也会校验如document.getElementById()