TypeScript面向对象

前言


🐸在平时的前端开发中我们一般都是进行函数式的写法来进行开发的,但是如果在服务端我们可能就需要进行面向对象的开发方式,那么class我们就会经常性的使用。

一.类的基本组成


🐔我们在编写类的时候可能会注意到类的基本组成,一个完整的类可能包括如下基本内容构造函数 属性 方法 访问符我们首先来编写一个类的基本结构如下:

ts 复制代码
class Foo {
  prop: string;

  constructor(inputProp: string) {
    this.prop = inputProp;
  }

  print(addon: string): void {
    console.log(`${this.prop} and ${addon}`)
  }

  get propA(): string {
    return `${this.prop}+A`;
  }

  set propA(value: string) {
    this.prop = `${value}+A`
  }
}

上述代码中prop就是这个类的属性,constructor就是这个类的构造函数,print就是这个类的方法,getset就是类的存取器,可以在存取过程中进行一些操作。

二.类的修饰符


😳类中除了上述的内容意外还有一种对类成员进行修饰的被称为修饰符,类中的修饰符有如下这些。

  1. public:此类成员可以在类,类的实例,子类中都能访问。
  2. private:此类成员只能在类的内部访问。
  3. protected:此类成员只能在类和子类中访问。
  4. readonly:被修饰的属性或参数只能读取不能修改。
  5. static:static 关键字来标识一个成员为静态成员,被修饰成员只能通过类直接访问。

三.继承-实现-抽象类


🐣当我们想对一个类进行扩展的时候我们一般会对这个类进行继承,然后扩展相应的功能。

ts 复制代码
class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  eat() {
    console.log(`${this.name} is eating.`);
  }
}

class Dog extends Animal {
  breed: string;

  constructor(name: string, breed: string) {
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name} is barking.`);
  }
}

const dog = new Dog('Buddy', 'Labrador');
dog.eat(); // 输出:Buddy is eating.
dog.bark(); // 输出:Buddy is barking.
console.log(dog.name); // 输出:Buddy
console.log(dog.breed); // 输出:Labrador

🦧上述代码中我们会调用super方法进行调用父类的构造方法,然后传入参数name这个时候当我们调用父类的方法的时候父类的this.name就是我们传入的name的数据。


😣抽象类:用来声明一个类的基本结构,TS中无法声明静态的抽象成员。

ts 复制代码
abstract class AbsFoo {
  abstract absProp: string;
  abstract get absGetter(): string;
  abstract absMethod(name: string): string
}

class Foo implements AbsFoo {
  absProp: string = "aaa"

  get absGetter() {
    return "aaa"
  }

  absMethod(name: string) {
    return name
  }
}

😬其实在TS中我们经常会使用interface来进行类结构的声明,更加便捷好用。

ts 复制代码
interface FooStruct {
  absProp: string;
  get absGetter(): string;
  absMethod(input: string): string
}

class Foo implements FooStruct {
  absProp: string = "aaa"

  get absGetter() {
    return "aaa"
  }

  absMethod(name: string) {
    return name
  }
}

四.构造函数简写方式


👽在TS中还有对应的构造函数简写的方式,可以简化我们的编码

ts 复制代码
class Person {
  constructor(public name: string, private age: number) {
    // 不需要显式地在类中声明属性,直接在构造函数参数上添加修饰符即可
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const person = new Person('John', 25);
console.log(person.name); // 输出:John
person.sayHello(); // 输出:Hello, my name is John and I am 25 years old.
console.log(person.age); // 报错:属性 'age' 是私有的,只能在类 'Person' 中访问

五.面向对象的SOLID 原则


🦔S,单一功能原则,一个类应该仅具有一种职责。

🐻‍❄️O,开放封闭原则,一个类应该是可扩展但不可修改的。

🐸L,里式替换原则,一个派生类可以在程序的任何一处对其基类进行替换。

😳I,接口分离原则,类的实现方应当只需要实现自己需要的那部分接口。

🦥D,依赖倒置原则,这是实现开闭原则的基础,它的核心思想即是对功能的实现应该依赖于抽象层。

六.总结


🦧这篇文章我们总结讲解了下面向对象的内容,从类的属性,继承,实现等几方面阐述了类的基本用法。

相关推荐
Huazzi.23 分钟前
免费好用的静态网页托管平台全面对比介绍
前端·网络·github·web
吃土少女古拉拉31 分钟前
前端和后端
前端·学习笔记
寒雒1 小时前
【Python】实战:实现GUI登录界面
开发语言·前端·python
独上归州2 小时前
Vue与React的Suspense组件对比
前端·vue.js·react.js·suspense
Komorebi⁼2 小时前
Vue核心特性解析(内含实践项目:设置购物车)
前端·javascript·vue.js·html·html5
明月清风徐徐2 小时前
Vue实训---0-完成Vue开发环境的搭建
前端·javascript·vue.js
SameX2 小时前
HarmonyOS Next 企业数据备份与恢复策略
前端·harmonyos
SameX2 小时前
HarmonyOS Next 企业数据传输安全策略
前端·harmonyos
daopuyun2 小时前
LoadRunner小贴士|开发Web-HTTP/HTML协议HTML5相关视频应用测试脚本的方法
前端·http·html
李先静2 小时前
AWTK-WEB 快速入门(1) - C 语言应用程序
c语言·开发语言·前端