TypeScript 中的类:面向对象编程的基础

🤍 前端开发工程师、技术日更博主、已过CET6

🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1

🕠 牛客 高级专题作者、打造专栏《前端面试必备》《2024面试高频手撕题》

🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》《带你从入门到实战全面掌握 uni-app》

💬 前些天发现了一个巨牛的人工智能学习网站 ,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站

文章目录

在 TypeScript 中,类(Classes)是实现面向对象编程(OOP)的基础。类允许你创建可重用的代码,通过封装、继承和多态等特性,TypeScript 类为开发者提供了强大的工具来构建复杂的应用程序。

什么是类?

类是创建对象的蓝图或模板。它定义了对象的属性(数据)和方法(行为)。在 TypeScript 中,类还支持类型注解,这有助于提高代码的可读性和可维护性。

创建类

在 TypeScript 中,你可以使用 class 关键字来创建一个类。

typescript 复制代码
class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return 'Hello, ' + this.greeting;
  }
}

在这个例子中,Greeter 是一个类,它有一个 greeting 属性和一个 greet 方法。

实例化类

你可以使用 new 关键字来创建类的实例。

typescript 复制代码
let greeter = new Greeter('world');
console.log(greeter.greet()); // 输出 'Hello, world'

在这个例子中,我们创建了一个 Greeter 类的实例,并调用了它的 greet 方法。

类的属性和方法

类可以包含属性和方法。属性是类的状态,方法是类的行为。

typescript 复制代码
class Employee {
  name: string;
  age: number;

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

  getAge() {
    return this.age;
  }
}

在这个例子中,Employee 类有两个属性 nameage,以及一个方法 getAge

继承

TypeScript 支持继承,这意味着你可以创建一个基于另一个类的类。子类继承父类的属性和方法。

typescript 复制代码
class Manager extends Employee {
  department: string;

  constructor(name: string, age: number, department: string) {
    super(name, age);
    this.department = department;
  }

  getDepartment() {
    return this.department;
  }
}

在这个例子中,Manager 类继承了 Employee 类,并添加了一个 department 属性和一个 getDepartment 方法。

访问修饰符

TypeScript 提供了访问修饰符(publicprotectedprivate),它们用于控制类成员的可见性。

typescript 复制代码
class Employee {
  private name: string;
  protected age: number;

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

  public getAge() {
    return this.age;
  }
}

在这个例子中,name 属性是私有的,只能在类内部访问。age 属性是受保护的,可以在类内部和子类中访问。getAge 方法是公共的,可以在任何地方访问。

结论

在 TypeScript 中,类是实现面向对象编程的基础。类允许你创建可重用的代码,通过封装、继承和多态等特性,TypeScript 类为开发者提供了强大的工具来构建复杂的应用程序。通过使用类,开发者可以创建更强大和灵活的代码,从而提高生产力和代码质量。

相关推荐
3283478051Sun5 分钟前
vue(5)
前端·javascript·vue.js
吃蛋糕的居居5 分钟前
疯狂前端面试题(二)
javascript·css·vue.js·chrome·算法·react.js·html
呀啊~~14 分钟前
【前端基础】深入解析JavaScript中的编译原理、内存管理、垃圾回收机制和正则表达式
前端·javascript·学习·正则表达式
玄晓乌屋15 分钟前
react 19 useOptimistic 竞争更新乐观值时阻塞
前端·javascript·react.js
roamingcode17 分钟前
前端开发架构师Prompt指令的最佳实践
前端·javascript·react.js·prompt·ai编程
张3蜂21 分钟前
.NET Core 8 Blazor 和 Vue 3 技术构建网
前端·vue.js·.netcore
偷光23 分钟前
React 生命周期函数详解
前端·javascript·react.js
还是鼠鼠24 分钟前
XMLHttpRequest的基础使用
前端·javascript·vscode·ajax·前端框架·html5
呀啊~~28 分钟前
【前端框架与库】深入解析Vue.js:从Vite到服务端渲染,全面解析Vue的核心特性
前端·javascript·vue.js·学习·前端框架
机构师1 小时前
<tauri><rust><GUI>基于rust和tauri,在已有的前端框架上手动集成tauri示例
开发语言·javascript·rust·前端框架·tauri