TypeScript 高级类型

来源

概述

1. class 类
2. 类型兼容性
3. 交叉类型
4. 泛型 和 keyof
5. 索引签名类型 和 索引查询类型
6. 映射类型

1. class 类

实例属性初始化：

class Person {
  age: number
  gender= '男'
}

1. 声明成员 age，类型为 number（没有初始值）。
2. 声明成员 gender，并设置初始值，此时，可省略类型注解（TS 类型推论 为 string 类型）

 构造函数：

class Person {
  age: number
  gender: string
  constructor(age: number, gender: string) {
    this.age = age
    this.gender = gender
  }
}

1. 成员初始化（比如，age: number）后，才可以通过 this.age 来访问实例成员。
2. 需要为构造函数指定类型注解，否则会被隐式推断为 any；构造函数不需要返回值类型。

实例方法： 

class Point {
  x = 10
  y = 20
  scale(n: number): void {
    this.x *= n
    this.y *= n
  }
}

类继承的两种方式：1 extends（继承父类） 2 implements（实现接口）。

class Animal {
  move() {
    console.log('Moving along');
  }
}

class Dog extends Animal {
  bark() {
    console.log('汪!');
  }
}

const dog = new Dog()

dog.bark()
dog.move()

1. 通过 extends 关键字实现继承。
2. 子类 Dog 继承父类 Animal，则 Dog 的实例对象 dog 就同时具有了父类 Animal 和 子类 Dog 的所有属性和方法。

class Person implements Singable {
  sing() {
    console.log('你是我的小呀小苹果儿')
  }
}

const dog = new Person()
dog.sing()

1. 通过 implements 关键字让 class 实现接口。
2. Person 类实现接口 Singable 意味着，Person 类中必须提供 Singable 接口中指定的所有方法和属性

1. public：表示公有的、公开的，公有成员可以被任何地方访问，默认可见性。

class Animal {
  public move() {
    console.log('Moving along');
  }
}

1. 在类属性或方法前面添加 public 关键字，来修饰该属性或方法是共有的。
2. 因为 public 是默认可见性，所以，可以直接省略。

2. protected：表示受保护的，仅对其声明所在类和子类中（非实例对象）可见。 

class Animol {
  protected move() {
    console.log('Moving along!')
  }
}
class Dog extends Animol {
  bark() {
    console.log('汪!')
    this.move()
  }
}
const bog = new Dog()
bog.bark()

1. 在类属性或方法前面添加 protected 关键字，来修饰该属性或方法是受保护的。
2. 在子类的方法内部可以通过 this 来访问父类中受保护的成员，但是，对实例不可见！

3. private：表示私有的，只在当前类中可见，对实例对象以及子类也是不可见的。 

class Animal {
  private move() {
    console.log('Moving along');
  }
  walk() {
    this.move()
  }
}

1. 在类属性或方法前面添加 private 关键字，来修饰该属性或方法是私有的。
2. 私有的属性或方法只在当前类中可见，对子类和实例对象也都是不可见的！

4. readonly： 除了可见性修饰符之外，还有一个常见修饰符就是：readonly（只读修饰符）。

class Person {
  readonly age: number = 18
  constructor(age: number) {
    this.age = age
  }
}

类型兼容性

class Point { x: number; y: number }
class Point2D { x: number; y: number }

const p: Point = new Point2D()

class Point { x: number; y: number }
class Point3D { x: number; y: number; z: number }

const p: Point = new Point3D()

• 接口之间的兼容性，类似于 class。并且，class 和 interface 之间也可以兼容。

•  函数之间兼容性比较复杂，需要考虑：1 参数个数 2 参数类型 3 返回值类型。

1. 参数个数，参数多的兼容参数少的（或者说，参数少的可以赋值给多的） 

1. 参数少的可以赋值给参数多的，所以，f1 可以赋值给 f2。
2. 数组 forEach 方法的第一个参数是回调函数，该示例中类型为：(value: string, index: number, array: string[]) => void。
3. 在 JS 中省略用不到的函数参数实际上是很常见的，这样的使用方式，促成了 TS 中函数类型之间的兼容性。
4. 并且因为回调函数是有类型的，所以，TS 会自动推导出参数 item、index、array 的类型。

•  函数之间兼容性比较复杂，需要考虑：1 参数个数 2 参数类型 3 返回值类型。

2. 参数类型，相同位置的参数类型要相同（原始类型）或兼容（对象类型） 

解释：函数类型 F2 兼容函数类型 F1，因为 F1 和 F2 的第一个参数类型相同。

2.1. 参数类型，相同位置的参数类型要相同或兼容。

 解释：

1. 注意，此处与前面讲到的接口兼容性冲突。
2. 技巧：将对象拆开，把每个属性看做一个个参数，则，参数少的（f2）可以赋值给参数多的（f3）

• 函数之间兼容性比较复杂，需要考虑：1 参数个数 2 参数类型 3 返回值类型。

3. 返回值类型，只关注返回值类型本身即可：

1. 如果返回值类型是原始类型，此时两个类型要相同，比如，左侧类型 F5 和 F6。
2. 如果返回值类型是对象类型，此时成员多的可以赋值给成员少的，比如，右侧类型 F7 和 F8。