• 【TypeScript】抽象类的使用 | 类的类型


    TypeScript类基本使用的补充

    抽象类的使用

    我们知道,继承是多态使用的前提

    所以在定义很多通用的调用接口时, 我们通常会让调用者传入父类,通过多态来实现更加灵活的调用方式。

    但是,父类本身可能并不需要对某些方法进行具体的实现,所以父类中定义的方法,,我们可以定义为抽象方法

    什么是抽象方法? 在TypeScript中没有具体实现的方法(没有方法体),就是抽象方法

    抽象类是使用abstract声明的类;

    抽象方法是使用abstract声明的方法,抽象方法必须存在于抽象类中, 抽象方法是没有方法体的;

    我们来看下面这样一个例子

    如下面代码中, 我们有一个函数makeArea, 用于计算图形的面积, 该函数可以计算圆形, 矩形等图形的面积, 但是在函数中, 到底实现哪一个图形的面积呢? 实现哪一个图形的面积都是不合适的, 因此我们可以传入一个参数, 要求传入的参数都实现了getArea的方法, 我们只需在函数中调用getArea即可

    再创建一个父类, 将父类定义为抽象类, 在抽象类中定义一个抽象方法getArea

    当我们需要计算哪个图形的面积时, 就可以创建所需要求面积图形的类, 让他继承自父类(抽象类), 并对父类的抽象方法进行实现, 例如下面代码中, 我是分别创建了矩形面积和圆形面积的类, 让他们继承自父类Shape

    function makeArea(shape: Shape) {
      return shape.getArea()
    }
    
    // 定义抽象父类
    abstract class Shape {
      // 定义抽象方法
      abstract getArea(): number
    }
    
    // 1.定义计算矩形面积的类
    class Rectangle extends Shape {
      width: number
      height: number
    
      constructor(width: number, height: number) {
        super()
        this.width = width
        this.height = height
      }
    
      getArea() {
        return this.width * this.height
      }
    }
    
    // 2.定义计算圆形面积的类
    class Circle extends Shape {
      r: number
    
      constructor(r: number) {
        super()
        this.r = r
      }
    
      getArea() {
        return this.r * this.r * 3.14
      }
    }
    
    
    // 测试
    const reactangle = new Rectangle(10, 20)
    const circle = new Circle(2)
    
    console.log(makeArea(reactangle))
    console.log(makeArea(circle))
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    抽象类有如下的特点

    抽象类是不能被实例化的(也就是抽象类不能通过new创建)

    抽象方法必须被子类实现,否则该类必须是一个抽象类, 如果是一个抽象类就可以不实现;


    类的类型

    类本身也是可以作为一种数据类型的

    • 例如下面代码中, 此时p就是Person类型的
    class Person {
      name: string = "aaa"
    
      eating() {
        console.log("eating")
      }
    }
    
    const p = new Person()
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 我们也可以字面量的方式创建一个变量p, 要求他是Person类型的, 那么我们要保证对应的属性和方法需要与Person保持一致
    class Person {
      name: string = "aaa"
    
      eating() {
        console.log("eating")
      }
    }
    
    const p: Person = {
      // 属性需要和Person类保持一致
      name: "chenyq",
      eating() {
        console.log("p eating")
      }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    应用场景

    例如开发中, 我们的封装的函数, 需要要求传入一个类的类型, 这样限制才能保证函数中可以正常的使用类的属性或者方法

    • 我们可以传入Person类的实例对象
    class Person {
      name: string
      constructor(name: string) {
        this.name = name
      }
    }
    
    function printName(p: Person) {
      console.log(p.name)
    }
    
    // 测试
    const p1 = new Person("chenyq")
    const p2 = new Person("kaisa")
    
    printName(p1)
    printName(p2)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 也可以传入和Person类属性和方法能够一一对应的对象
    class Person {
      name: string
      eating() {
        console.log("eating")
      }
      constructor(name: string) {
        this.name = name
      }
    }
    
    function printName(p: Person) {
      console.log(p.name)
    }
    
    // 测试
    printName({ name: "kaisa", eating() {} })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
  • 相关阅读:
    自己一天在家没事就爱折腾
    大文件上传,前端vue 做分片上传
    RabbitMQ消息积压比较厉害,然后突然丢弃
    【Linux】进程间通信——共享内存
    vue3检测是手机还是pc端,监测视图窗口变化
    基于SpringBoot的美发门店管理系统
    AMBA总线相关知识记录
    《Spring Guides系列学习》guide21 - guide25
    网络安全劳动力发展报告
    嵌入式实时操作系统的设计与开发 (前后台系统)
  • 原文地址:https://blog.csdn.net/m0_71485750/article/details/126336606