1、什么是TS
    image.png

    类型

    • JS基本类型
    • any类型
    • 联合类型 string | number

    • 数组

      • let arr:number[] = [1,2,3]
        1. let arr:number[] =  [1,2,3]

    • 元组(限定了数据类型、对应位置的数组) ```javascript let tuple: [string, number] = [“11”, 1]; let tuple: [string, number] = [“11”, 1, true]; // 提示警告

    2. - 接口 Interface
    4. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/152077/1610791224550-8f709dda-16c8-4665-aff6-16ce0bf9e248.png#align=left&display=inline&height=577&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1154&originWidth=2018&size=383526&status=done&style=none&width=1009)<br />可选属性: ?<br />只读属性 readonly
    6. - 函数
    7.    - 函数参数带有默认值，即是可选参数
    8. ```javascript
    9. // 函数声明
    10. function add(x: number, y: number, z: number = 10): number {
    11.   return x + y + z;
    12. }
    13. add(1, 2, 3);
    14. // 函数表达式
    15. const add2 = function (x: number, y: number, z: number = 10): number {
    16.   return x + y + z;
    17. };
    • 类Class

    image.png

    1. // 封装
    2. class Animals {
    3.   name: string;
    4.   constructor(name: string) {
    5.     this.name = name;
    6.   }
    7.   run() {
    8.     console.log(`${this.name} is running`);
    9.   }
    10. }
    11. // 实例化
    12. let cat = new Animals("多肉");
    13. cat.run();
    15. // 继承
    16. class Dog extends Animals {
    17.   bark() {
    18.     console.log(`${this.name} is bark`);
    19.   }
    20. }
    21. // let dog = new Dog("dahuang");
    22. // dog.bark();
    24. // 多态 - 重写类的方法
    25. class TuTu extends Animals {
    26.   constructor(name: string) {
    27.     super(name); // 通过super继承父类所有的属性
    28.   }
    29.   run() {
    30.     return "TuTu" + super.run(); // 重写父类的方法，通过super调用父类方法
    31.   }
    32. }
    33. let tutu = new TuTu("tangsan");
    34. tutu.run();

    类的修饰符

    • public：公有（家里的空气，共享）
    • private：私有（家里的老婆，独有）
    • protected：受保护的，继承子类可以访问修改，实例化的不可访问修改（家里的财产，继承）
    • static： 静态，属性或者方法跟类没有什么关联

    • readonly： 只读，不可修改

    • 枚举 Enum

      1. enum Direction { // 定义枚举
      2. up = "upVal",
      3. down = "downVal",
      4. left = "leftVal",
      5. right = "rightVal",
      6. }
      7. console.log(Direction.up); // "upVal"
      9. // 双向访问 
      10. enum Direction2 {
      11. up,
      12. down,
      13. left,
      14. right,
      15. }
      16. console.log(Direction2.up); // 0
      17. console.log(Direction2[0]); // up

    • 泛型 Generics

    image.pngimage.png

    1. function echo<T>(args: T): T {
    2.   return args;
    3. }
    4. let result = echo(123);

    占位符，根据使用的时候来决定具体的类型

    约束泛型：让传入的值满足特定的条件
    image.png
    定义了一个函数，其中函数里打印了某个可能不存在的属性，会报错

    image.png
    通过定义一个约束泛型（必须包含length的接口，并让泛型继承）来约束传入的参数必须包含    length属性