5.TypeScript入门之TS高级类型（class类）

上一章节：4.TypeScript入门之TS常用类型(3)

Ⅳ.TypeScript高级类型

概述

TS中的高级类型有很多，重点学习以下高级类型：

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

4.1 class类

TypeScript 全面支持 ES2015 中引入的class关键字，并为其添加了类型注解和其他语法（比如，成员可见性修饰符等）。

class基本使用，如下：

class Person{}   // 创建一个Person类

const p = new Person()   // new一个Person实例，就是创建一个Person{}类的实例对象
// 变量p就是Person{}类的一个实例对象

解释：

1. 根据TS中的类型推论，可以知道 Person 类的实例对象 p 的类型是 Person类。
2. TS中的 class ，不仅提供了 class 的语法功能，也作为一种类型存在。

---

1.实例属性初始化：

class Person {
  age: number
  gender = '男'
  // gender：string = '男'
}

解释：

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

---

2.构造函数（constructor）

class Person {
  age: number
  gender: string

  // 构造函数的作用就是为类的一个实例属性设置初始值
  constructor(age: number, gender: string) {
    this.age = age
    this.gender = gender
  }
}

解释：

1. 成员初始化（比如，age: number）后，才可以通过this.age来访问实例成员。
2. 需要为构造函数指定类型注解，否则会被隐式推断为any；构造函数不需要返回值类型。
3. 构造函数是一种特殊的方法。主要用来在创建对象时初始化对象， 即为对象成员变量赋初始值。

eg：

class Person {
  age: number
  gender: string

  constructor(age: number, gender: string) {
    this.age = age   
    // this.age拿到类的属性age,"=age"将构造函数的参数age赋值给类的属性age
    this.gender = gender
  }   // 通过构造函数初始化类的属性（age和gender）
}   // 创建Person类

const p = new Person(18, '男')   // Person类的初始化

p.age   // 调用实例化对象中的属性age

---

3.class类的实例方法

实例方法和实例属性一样，都是通过实例对象来访问的

class Point {   // 声明Point类
  x = 10
  y = 10
  
  scale(n: number): void {   // 类的方法scale()
    this.x *= n
    this.y *= n
  }
}
const p = new Point()   // 实例化对象

p.scale(10)   // 通过访问实例化对象p来访问Point类的方法scale()
console.log(p.x, p.y)   // ts-node 

解释：方法的类型注解（参数和返回值）与函数用法相同。

---

4.class类的继承（extends和implements）

类继承的两种方式：

α、extends（继承父类）

class Animal {
  move() { console.log('Moving along!') }
}
class Dog extends Animal {
  bark() { console.log('汪!') }
}
const dog = new Dog()

解释：

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

β、implements（实现接口）

说明：JS中只有extends，而implements是 TS 提供的。

interface Singable {
  sing(): void
  name: string
}
class Person implements Singable {
  sing() {
    console.log('你是我的小呀小苹果儿')
  }
  name = 'jack'
}

解释：

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

---

5.class类成员的可见性

类成员的可见性：可以使用TS来控制class的方法或属性对于class外的代码是否可见。

可见性修饰符包括：1 public（公有的） 2 protected（受保护的） 3 private（私有的）。

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

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

解释：

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

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

class Animal {   // 父类
  protected move() {
    console.log('Moving along!')
  }   // 这个方法是受保护的
}

const animal = new Animal()
// animal.move()报错，受保护的方法对实例不可见！

class Dog extends Animal {   // 子类
  bark() {
    console.log('汪!')
    this.move()
  }
}

const dog = new Dog()
// dog.move()报错，受保护的方法对子类的实例不可见！

解释：

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

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

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

解释：

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

---

6.readonly（只读修饰符）

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

readonly：表示只读，用来防止在构造函数之外对属性进行赋值。

class Person {
  // 注意：只要是readonly来修饰的属性，必须手动提供明确的类型
  readonly age: number = 18
  constructor(age: number) {
    this.age = age
  }
}

解释：

1. 使用readonly 关键字修饰该属性是只读的，注意只能修饰属性不能修饰方法。
2. 注意：属性 age 后面的类型注解（比如，此处的 number）如果不加，则 age 的类型为18（字面量类型）。
3. 接口或者 {} 表示的对象类型，也可以使用 readonly 。

// 在接口中使用readonly
interface IPerson {
  readonly name: string
}

let obj: IPerson {
  name: 'jack'
}
obj.name = 'rose'   // 报错，因为name是只读属性

// 在 {} 对象类型中使用readonly
let obj: { readonly name: string } = {
  name = 'jack'
}
obj.name = 'rose'   // 报错，因为name是只读属性

---

~~
~~
下一章节：6.TypeScript入门之TS高级类型（类型兼容性、交叉类型和泛型）