0）前言

类型注解

作用：相当于强类型语言中的类型声明；
语法：（函数/变量）: type

联合类型

  1. // 可以是number，也可以是string
  2. let arr2: Array<number | string> =[1,2,3,'4'];

Typescript VS ES6数据类型

截屏2021-04-19 下午2.29.59.png

数组（Array）

  1. // 定义数组有两种方法：
  2. let myArr: number[] = [1, 2, 3];
  4. // <> 里面是类型名称（泛型）
  5. let myArr: Array<boolean> = [false, false, true];

元组（tuple）

与数组类似，但是里面的元素是可以多个类型，编译出来的 JavaScript 也是数组
元素的个数是固定的，顺序不能变。

  1. // tuple
  3. // 定义
  4. let my_tuple: [string, number];
  5. // 赋值
  6. my_tuple = ["jiang", 100];

tuple的越界问题

  1. my_tuple.push(2)
  2. // ['jiang',100, 2]
  3. console.log(my_tuple);
  5. //error 调用会出错：下标越界问题
  6. my_tuple(2);

函数（function）

指定返回值类型

可以让调用者知道是什么类型的返回值，以便进行处理

通常，返回值的类型是可以省略的，因为TS会做自动推断。

  1. // void 代表什么也不返回
  2. const add = (a: number, b: number): void => {
  3.     console.log(a + b)
  4. }

默认参数与可选参数

  • 默认参数（=），可选参数（?），一般放到参数后面
  • 默认参数可以不指定类型，会自动判断和计算
  1. const add = (a: number, b = 10, c?: number): void => {
  2.     if (b) {
  3.         console.log(a + b);
  4.     } else {
  5.         console.log(a);
  6.     }
  7. }
  9. let sum = add(20, 20);
  10. console.log(sum);

函数的定于与实现

  1. // 函数定义
  2. let compute: (x:number,y:number) => number;
  4. // 函数实现
  5. compute = (a,b) => a + b;

对象（Object）

类型“object”上不存在属性“x”

  1. let obj:object= {x:1,y:2}
  2. obj.x =3 //error 类型“object"上不存在属性“x"
  4. // 正确的做法
  5. let obj2: {x:number,y:number} = {x:1,y:2}
  6. obj2.x =3

类（Class）

ts是面向对象的语言，具有以下特性：

  • 面向对象 - 继承与多态
  • 面向对象 - 构造方法（constructor）和 方法（methods）
  • 面向对象 - private 和 protected 的异同
  • 面向对象 - 成员可见性public 和 private （默认是public，可省略public 关键字）

    继承与多态

  1. // 模板
  2. class Person {
  3.     // 定义了两个属性
  4.     firstName: string;
  5.     lastName: string;
  6.     greet() {
  7.         console.log('hi');
  8.     }
  9.     othergreet() {
  10.         this.greet();
  11.         console.log('*****');
  12.     }
  13. }
  14. // 继承成了父类的数据和行为，就是属性和方法
  15. // 它的父类就是 Person
  16. class Programmer extends Person {
  17.     greet() {
  18.         console.log('hello world');
  19.     }
  20.     // super 代表父类
  21.     greetLikeNormalPeople() {
  22.         super.greet();
  23.     }
  24. }
  25. let aProgrammer: Person = new Programmer();
  26. // let aProgrammer: Programmer = new Person();
  27. // 调用方法时，先找自己本身对象的方法，如果没有，会找父类的
  28. // aProgrammer.greet();
  29. // aProgrammer.greetLikeNormalPeople();
  30. aProgrammer.othergreet();

public / protected / private

三个修饰符对成员属性和方法进行修饰
权限范围 public > protected > private

public 公有的（默认是 public，只是省略了）

  • 任何属性和方法都可以在生成的对象中调用；
  • 继承的对象也能调用

  • 默认是 public，只是省略了

    private 私有的

  • 只有在内部对象内才能访问，实例的对象调用不了；

  • 要调用私有方法和属性，可以在 class 里定义 public 的方法来调用
  • 继承的对象也是不能够直接用生成的对象来访问
  • 子类继承的时候也可以继承私有属性和方法，也是要通过继承过来的 public 方法来调用

protected 受保护的，只有在内部 class 还有子类才能访问，生成的对象访问不了，
要调用私有方法和属性，可以在 class 里定义 public 的方法来调用
继承的对象也是不能够直接用生成的对象来访问
子类继承的时候也可以继承保护的属性和方法，也是要通过继承过来的 public 方法和自己定义的public方法来在外部调用（这点跟其他的语言有些不太一样）

外部调用：生成对象的时候
内部调用：class 里面的方法

private protected异别： 在子类的时候

  1. 继承的方法一样的表现形式，可以内部访问继承过来的 public private protected 属性和方法
  2. 子类定义的方法，只能访问 继承过来的 public 和 protected 的方法和属性，不能访问 继承过来的 private 属性和方法，如果要访问父类的 private 属性和方法，可以通过继承过来的public private protected方法在内部来访问

常见问题

为什么有var还要使用let？

  • 限制变量的作用范围（使用 let 来定义变量）
  • 防止变量的重复定义（相同类型）
  1. if(true){
  2.   var i = 100;
  3. }
  4. // 在函数里使用var定义i，函数外仍可以使用i
  5. console.log(i); // 100