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 类为开发者提供了强大的工具来构建复杂的应用程序。通过使用类,开发者可以创建更强大和灵活的代码,从而提高生产力和代码质量。

相关推荐
冬阳春晖9 分钟前
web animation API 锋利的css动画控制器 (更新中)
前端·javascript·css
Python私教1 小时前
使用FastAPI和React以及MongoDB构建全栈Web应用05 FastAPI快速入门
前端·react.js·fastapi
浪裡遊1 小时前
Typescript中的对象类型
开发语言·前端·javascript·vue.js·typescript·ecmascript
杨-羊羊羊1 小时前
什么是深拷贝什么是浅拷贝,两者区别
开发语言·前端·javascript
发呆的薇薇°2 小时前
在vue里,使用dayjs格式化时间并实现日期时间的实时更新
前端·javascript·vue.js
m0_627827522 小时前
vue3中 input 中放大镜在后面
javascript·vue.js·elementui
七冬与小糖2 小时前
【本地搭建npm私服】使用Verdaccio
前端·npm·node.js
从味书2 小时前
安装typescript时,npm install -g typescript报错
javascript·typescript·npm
lally.2 小时前
2025御网杯wp(web,misc,crypto)
前端·ctf
海绵不是宝宝8172 小时前
React+Springboot项目部署ESC服务器
前端·react.js·前端框架