【前端进阶】-TypeScript高级类型 | 类的初始化、构造函数、继承、成员可见性

前言

博主主页蜡笔雏田学代码
专栏链接【TypeScript专栏】
上两篇文章讲解了TypeScript的一些常用类型
详细内容请阅读如下：
【TypeScript基础】TypeScript之常用类型（上）
【TypeScript基础】TypeScript之常用类型（下）
今天来学习TypeScript一些高级类型！
感兴趣的小伙伴一起来看看吧~

---

Typescript高级类型

概述

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

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

首先来学习一下class类中的一些基本使用

class类

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

class基本使用，如下：

class Person {}  //创建类：class关键字+类的名称 {}
const p = new Person() //创建实例对象 p就是Person这个class的实例对象

解释：

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

---

1. 实例属性初始化

解释：

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

---

2. 类的构造函数

作用是一般用来为类的实例属性设置一个初始值，通过constructor()来指定构造函数的，constructor是配合class去实现实例对象的实例化这个过程的。

解释：因为类是抽象的，所以需要实例化对象才能使用类。对象是类通过实例化得出的一个具体的个体 ，实例化就是从类到个体的过程。

1. 成员初始化（比如，age：number）后，才可以通过this.age来访问实例成员。
2. 需要为构造函数指定类型注解，否则会被隐式推断为any；构造函数不需要返回值类型。
3. 在构造函数里，通过this访问到实例成员，完成初始值的设置。
4. this在类里面表示类的实例对象，实例对象访问到的属性就是实例属性了

ps：this有代指这个的含义，这里的this就是指当前类。例如this.name就是指当前类中的name也就是这个成员变量。

var array = new Array()  
//new Array()一个标准的构造函数,“var” 声明了一个 “array” 对象,
//用构造函数 “new Array()” 来初始化这个 “array” 对象为它赋初始值.

---

3. 类的实例方法

class Point {
  x = 10  //指定类的实例属性，设置默认值来实现的
  y = 10
  scale(n: number): void {
    this.x *= n
    this.y *= n
  }
}
const p = new Point()
p.scale(10)

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

---

4. 类的继承

类继承的两种方式：

1. extends（继承父类）
2. implements（实现接口）。

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

A.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的所有属性和方法。

B.implements：

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

解释：

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

---

5. 类成员可见性

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

可见性修饰符包括：

1. public（公有的）
2. protected（受保护的）
3. private（私有的）

---

a. public：

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

class Animal { 
    public move() {
      console.log('Moving along!')
    }
  }
 const b = new Animal() 
 b.move()

解释：

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

---

b.protected：

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

//父类
class Animal { 
    // 这个方法是受保护的
    protected move() {
      console.log('走两步')
    }
    run() {
      this.move()
      console.log('跑两步')
    }
  }
  const b = new Animal() 
//   b.move()  通过父类实例对象访问不到move()这个方法的,只能在类“Animal”及其子类中访问。

//子类继承父类
class Dog extends Animal { 
    bark() {  
      this.move()
      console.log('汪！')
    }
  }
  const dog = new Dog()
//   dog.move() 通过子类实例对象也访问不到move()这个方法的,只能在类“Animal”及其子类中访问。

解释：

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

---

c.private:

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

//父类
class Animal { 
    private __run__() {
        console.log('Animal 内部辅助函数')
    }
    // 受保护的
    protected move() {
        this.__run__()   //对当前类是可见的
        console.log('走两步')
      }
    //   公开的
    run() {
        this.__run__()
        this.move()
        console.log('跑两步')
    }
}
const a = new Animal()

//子类
class Dog extends Animal { 
    bark() {  
    // this.__run__()    对子类以及实例是不可见的
      console.log('汪！')
    }
  }
const dog = new Dog()
// dog.__run__()   属性“__run__”为私有属性，只能在类“Animal”内部访问。

解释：

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

---

6. readonly(只读修饰符)

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

class Person {
    // 只读属性
    //注意：只要是readonly来修饰的属性，无论有没有默认值，都要指定类型
     readonly age: number = 18 
    constructor(age: number) {
        this.age = age
    }
}
// 错误演示
    readonly setAge() {  //"readonly" 修饰符仅可出现在属性声明或索引签名中。
        this.age = 20  //无法分配到 "age" ，因为它是只读属性。
    }

解释：

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

α.在接口中使用：

interface IPerson {
    readonly name: string
}

let obj: IPerson = {
    name: 'jack'
}
obj.name = 'rose' //代码提示：无法分配到 "name" ，因为它是只读属性。

β.在普通的类型对象中：

let obj: {readonly name: string} = {
     name: 'jack'
 }
obj.name = 'rose' //代码提示：无法分配到 "name" ，因为它是只读属性。

$今天的分享就到这里啦✨$

$原创不易，还希望各位大佬支持一下$

$点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$