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,依赖倒置原则,这是实现开闭原则的基础,它的核心思想即是对功能的实现应该依赖于抽象层。

六.总结


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

相关推荐
林小白的日常7 分钟前
uniapp中wx.getFuzzyLocation报错如何解决
前端·javascript·uni-app
傻小胖27 分钟前
React 脚手架配置代理完整指南
前端·react.js·前端框架
EterNity_TiMe_38 分钟前
【论文复现】农作物病害分类(Web端实现)
前端·人工智能·python·机器学习·分类·数据挖掘
余生H1 小时前
深入理解HTML页面加载解析和渲染过程(一)
前端·html·渲染
吴敬悦1 小时前
领导:按规范提交代码conventionalcommit
前端·程序员·前端工程化
ganlanA1 小时前
uniapp+vue 前端防多次点击表单,防误触多次请求方法。
前端·vue.js·uni-app
卓大胖_2 小时前
Next.js 新手容易犯的错误 _ 性能优化与安全实践(6)
前端·javascript·安全
m0_748246352 小时前
Spring Web MVC:功能端点(Functional Endpoints)
前端·spring·mvc
SomeB1oody2 小时前
【Rust自学】6.4. 简单的控制流-if let
开发语言·前端·rust
云只上2 小时前
前端项目 node_modules依赖报错解决记录
前端·npm·node.js