对 TypeScript 中类是怎么理解的?都有哪些应用场景?
在 TypeScript 中,类(class)是面向对象编程的核心构造之一,它允许你创建具有特定属性和方法的对象模板。TypeScript 的类概念和 JavaScript 中的类基本相同,但它提供了额外的类型检查和静态类型系统,从而增强了代码的安全性和可维护性。
1. TypeScript 中的类概述
TypeScript 中的类与 JavaScript 类非常相似,支持属性、构造函数、方法、访问修饰符(public、private、protected)、getter 和 setter、继承等特性。
基本语法
class Person {// 属性name: string;age: number;// 构造函数constructor(name: string, age: number) {this.name = name;this.age = age;}// 方法greet(): string {return `Hello, my name is ${this.name} and I am ${this.age} years old.`;}
}// 创建类的实例
const person = new Person("John", 30);
console.log(person.greet()); // 输出: Hello, my name is John and I am 30 years old.
在上面的例子中,Person 类具有 name 和 age 两个属性,并且有一个构造函数用于初始化这些属性。greet 方法返回一个问候字符串。
2. TypeScript 类的特性
2.1 访问修饰符(Access Modifiers)
TypeScript 支持访问修饰符,用于控制类的成员在不同的作用域中的可见性。
public:默认修饰符,表示属性或方法是公共的,可以在任何地方访问。private:表示属性或方法只能在类的内部访问,外部不能直接访问。protected:表示属性或方法只能在类和子类中访问。
class Employee {public name: string;private salary: number;protected department: string;constructor(name: string, salary: number, department: string) {this.name = name;this.salary = salary;this.department = department;}public getSalary(): number {return this.salary;}
}const emp = new Employee("Jane", 5000, "Engineering");
console.log(emp.name); // 公开属性可以访问
// console.log(emp.salary); // 错误:私有属性不可访问
console.log(emp.getSalary()); // 可以通过公共方法访问私有属性
2.2 类的继承(Inheritance)
继承允许你创建一个基于另一个类的新类,继承类可以访问父类的公共和受保护成员,并且可以重写父类的方法。
class Manager extends Employee {constructor(name: string, salary: number, department: string) {super(name, salary, department); // 调用父类构造函数}public manageTeam(): string {return `${this.name} is managing the ${this.department} team.`;}
}const manager = new Manager("Alice", 8000, "Marketing");
console.log(manager.manageTeam()); // 输出: Alice is managing the Marketing team.
2.3 Getter 和 Setter
TypeScript 支持 getter 和 setter 方法,它们允许你定义属性的访问行为(例如,读取和修改)。
class Product {private _price: number;constructor(price: number) {this._price = price;}get price(): number {return this._price;}set price(value: number) {if (value < 0) {throw new Error("Price cannot be negative");}this._price = value;}
}const product = new Product(100);
console.log(product.price); // 获取价格
product.price = 120; // 设置价格
// product.price = -10; // 错误:价格不能为负
3. 类的应用场景
类在 TypeScript 中有很多实际应用场景。以下是几个常见的应用场景,结合实际项目进行讲解:
3.1 创建复杂的实体对象
在许多应用中,我们需要管理各种实体(如用户、商品、订单等)。这些实体通常有许多属性和方法,并且可能涉及到继承、封装和多态等面向对象特性。
示例:电商系统中的商品类
class Product {private name: string;private price: number;private category: string;constructor(name: string, price: number, category: string) {this.name = name;this.price = price;this.category = category;}getDetails(): string {return `Product: ${this.name}, Price: $${this.price}, Category: ${this.category}`;}applyDiscount(discountPercentage: number): void {this.price -= (this.price * discountPercentage) / 100;}
}// 使用 Product 类
const phone = new Product("iPhone 15", 999, "Electronics");
console.log(phone.getDetails()); // Product: iPhone 15, Price: $999, Category: Electronics
phone.applyDiscount(10);
console.log(phone.getDetails()); // Product: iPhone 15, Price: $899.1, Category: Electronics
在这个电商应用中,Product 类封装了商品的属性和行为(如获取商品详情和应用折扣)。通过创建商品实例,代码能更清晰地管理和操作商品信息。
3.2 管理应用中的状态
在前端开发中,类通常用于管理应用的状态。例如,在使用 React、Angular 或 Vue 等框架时,可能会使用类来管理应用的状态逻辑和数据变更。
示例:购物车类
class ShoppingCart {private items: string[] = [];addItem(item: string): void {this.items.push(item);}removeItem(item: string): void {this.items = this.items.filter(i => i !== item);}getItems(): string[] {return this.items;}
}const cart = new ShoppingCart();
cart.addItem("Laptop");
cart.addItem("Phone");
console.log(cart.getItems()); // ["Laptop", "Phone"]
cart.removeItem("Phone");
console.log(cart.getItems()); // ["Laptop"]
在这个例子中,ShoppingCart 类帮助我们管理购物车的状态,并提供了对购物车进行添加、删除商品操作的能力。
3.3 构建复杂的业务逻辑
有些项目需要处理复杂的业务逻辑,比如银行账户管理、用户权限系统等,这些都可以通过类来表示和组织。
示例:银行账户类
class BankAccount {private balance: number;constructor(initialBalance: number) {this.balance = initialBalance;}deposit(amount: number): void {if (amount > 0) {this.balance += amount;} else {console.error("Deposit amount must be positive.");}}withdraw(amount: number): void {if (amount > this.balance) {console.error("Insufficient funds.");} else {this.balance -= amount;}}getBalance(): number {return this.balance;}
}const account = new BankAccount(500);
account.deposit(100);
account.withdraw(50);
console.log(account.getBalance()); // 输出: 550
在银行账户的例子中,BankAccount 类封装了存款、取款、余额查询等操作,使得账户的状态管理更加清晰和安全。
4. 总结
在 TypeScript 中,类是创建对象的蓝图,能够帮助开发者管理和封装数据、行为以及处理复杂的业务逻辑。TypeScript 的类型系统为类的使用提供了额外的安全性和可维护性,使得代码更加规范和易于理解。
常见的应用场景包括:
- 封装和组织数据:例如商品、订单、用户等实体的表示。
- 管理应用状态:如购物车、用户会话等。
- 实现复杂的业务逻辑:如银行账户、用户权限管理等。
通过类的继承、封装、接口和类型检查,TypeScript 提供了强大的面向对象编程能力,让开发者能够写出更易维护、易扩展的代码。
相关文章:
对 TypeScript 中类是怎么理解的?都有哪些应用场景?
在 TypeScript 中,类(class)是面向对象编程的核心构造之一,它允许你创建具有特定属性和方法的对象模板。TypeScript 的类概念和 JavaScript 中的类基本相同,但它提供了额外的类型检查和静态类型系统,从而增…...
2024“龙信杯“电子数据取证竞赛-服务器取证题目Writeup
服务器检材-分析 前置 提示:该服务器做了登录密码校验配置,如果没有拿到服务器的密码而直接仿真服务器,输入密码进入系统后,服务器会将部分数据给自动删除 前提:无 因为我们仿真进入服务器会自动删除文件࿰…...
Label-studio-ml-backend 和YOLOV8 YOLO11自动化标注,目标检测,实例分割,图像分类,关键点估计,视频跟踪
这里写目录标题 1.目标检测 Detection2.实例分割 segment3.图像分类 classify4.关键点估计 Keypoint detection5.视频帧检测 video detect6.视频帧分类 video classify7.旋转目标检测 obb detect8.替换yolo11模型 给我点个赞吧,谢谢了附录coco80类名称 笔记本 华为m…...
Elasticsearch Windows版的安装及启动
一、下载 https://www.elastic.co/cn/downloads/past-releases#elasticsearch 如下图 选择版本 我用的是7.17.5 你换成你需要的版本 二 使用 1.解压 解压完如图 2.启动 进入 bin 文件目录,双击运行 elasticsearch.bat 文件启动 ES 服务 出现报错 Cause…...
解决 VMware 嵌套虚拟化提示 关闭“侧通道缓解“
最近给电脑做了新版的 Windows 11 LTSC操作系统,在启动VMware Workstation时,提示"此虚拟机已启用侧通道缓解,可增强安全性,但也会降低性能",但是我没有启用 Hyper-V 相关的任何功能以及 WSL, 从…...
基于Redis实现的手机短信登入功能
目录 开发准备 注册阿里短信服务 依赖坐标 阿里短信 依赖 mybatis-plus 依赖 redis 依赖 配置文件 导入数据库表 短信发送工具类 生成随机验证码的工具类 校验合法手机号的工具类 ThreadLocal 线程工具类 消息工具类 基于 session 的短信登录的问题 开发教程 Redis 结构设计 …...
C# NetworkStream用法
一、注意事项: NetworkStream 是稳定的,面向连接的,所以它只适合 TCP 协议的环境下工作所以一旦在 UDP环境中,虽然编译不会报错,但是会跳出异常。如果用构造产生NetworkStream的实例,则必须使用连接的Socke…...
华三预赛从零开始学习笔记(每日编辑,复习完为止)
知识点分布 路由交换技术基础 计算机网络基本概念 计算机网络基本概念: 很多电脑和设备通过电线或无线信号连在一起,可以互相“说话”和“分享东西” 网络的主要形式和发展历程: 诞生阶段-最早的计算机网络是以单个计算机为中心的联机系统-终…...
MySQL基础大全(看这一篇足够!!!)
文章目录 前言一、初识MySQL1.1 数据库基础1.2 数据库技术构成1.2.1 数据库系统1.2.2 SQL语言1.2.3 数据库访问接口 1.3 什么是MySQL 二、数据库的基本操作2.1 数据库创建和删除2.2 数据库存储引擎2.2.1 MySQL存储引擎简介2.2.2 InnoDB存储引擎2.2.3 MyISAM存储引擎2.2.4 存储引…...
[ 应急响应进阶篇-2 ] Linux创建后门并进行应急处置-1:超级用户帐号后门
🍬 博主介绍 👨🎓 博主介绍:大家好,我是 _PowerShell ,很高兴认识大家~ ✨主攻领域:【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 🎉点赞➕评论➕收藏 养成习…...
【无人机/平衡车/机器人】详解STM32+MPU6050姿态解算—卡尔曼滤波+四元数法+互补滤波
详解STM32+MPU6050姿态解算—卡尔曼滤波+四元数法+互补滤波 效果: 更多单片机项目,单片机项目合集列表目录与专栏说明: 单片机项目合集列表与专栏说明——Excel合集列表目录查阅(持续更新)-CSDN博客编辑https://archie.blog.csdn.net/article/details/142381401https:/…...
数据结构-8.Java. 七大排序算法(上篇)
本篇博客给大家带来的是排序的知识点, 由于时间有限, 分两天来写, 上篇主要实现 前四种排序算法: 直接插入, 希尔, 选择, 堆排。 文章专栏: Java-数据结构 若有问题 评论区见 欢迎大家点赞 评论 收藏 分享 如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 …...
YOLOV5/rknn生成可执行文件部署在RK3568上
接上一篇文章best-sim.rknn模型生成好后,我们要将其转换成可执行文件运行在RK3568上,这一步需要在rknpu上进行,在强调一遍!!rknpu的作用是可以直接生成在开发板上运行的程序 退出上一步的docker环境 exit1.复制best-…...
java http body的格式 application/x-www-form-urlencoded不支持文件上传
在Java中,HTTP请求的body部分可以包含多种格式的数据,主要包括以下几种: application/x-www-form-urlencoded:这种格式将数据编码成键值对的形式,键和值都进行了URL编码,键值对之间用&符号连接。…...
GPU服务器厂家:为什么要选择 GPU 服务器?
文章来源于百家号:GPU服务器厂家 嘿,各位小伙伴们!今天咱来聊聊为啥要选择 GPU 服务器,特别是定制化的那种哦。 你们知道吗?现在定制化 GPU 服务器那可是超火的,简直就是科研项目的超强 “外挂”&#x…...
Python操作neo4j库py2neo使用之py2neo 删除及事务相关操作(三)
Python操作neo4j库py2neo使用之py2neo 删除及事务相关操作(三) py2neo 删除 1、连接数据库 from py2neo import Graph graph Graph("bolt://xx.xx.xx.xx:7687", auth(user, pwd), nameneo4j)2、删除节点 # 删除单个节点 node graph.node…...
Idea忽略提交文件、Idea设置文件隐藏、Idea提交时隐藏部分文件、git提交时忽略文件
文章目录 一、在idea中commit文件时隐藏文件方式一:创建.gitignore文件(推荐)方式二:通过File Types设置隐藏文件方式三:通过Git配置忽略文件(不推荐)总结 二、可能遇到的问题2.1、.gitigno…...
python如何使用spark操作hive
文章目录 1、服务启动2、修改配置3、验证4、开发环境编写代码操作hive 1、服务启动 # 启动hdfs和yarn start-all.sh # 日志服务也需要启动一下 mapred --daemon start historyserver # 启动spark的日志服务 /opt/installs/spark/sbin/start-history-server.sh #启动hive的meta…...
观察者模式和订阅模式
观察者模式和订阅模式在概念上是相似的,它们都涉及到一个对象(通常称为“主题”或“发布者”)和多个依赖对象(称为“观察者”或“订阅者”)之间的关系。然而,尽管它们有相似之处,但在某些方面也…...
基于ToLua的C#和Lua内存共享方案保姆级教程
C#和Lua内存共享方案保姆级教程 前言 在介绍C#和Lua内存共享方案之前,先介绍下面两个点来支撑这个方案的必要性 跨语言交互很费 Lua和C#交互最早是基于反射的方式实现的,后来为了提升性能发展成Luajit+C#静态方法导出注入到lua虚拟机的方式至此Lua+Unity的性能才达到了实…...
脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)
一、数据处理与分析实战 (一)实时滤波与参数调整 基础滤波操作 60Hz 工频滤波:勾选界面右侧 “60Hz” 复选框,可有效抑制电网干扰(适用于北美地区,欧洲用户可调整为 50Hz)。 平滑处理&…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容
基于 UniApp + WebSocket实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...
家政维修平台实战20:权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
GruntJS-前端自动化任务运行器从入门到实战
Grunt 完全指南:从入门到实战 一、Grunt 是什么? Grunt是一个基于 Node.js 的前端自动化任务运行器,主要用于自动化执行项目开发中重复性高的任务,例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...
MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用
文章目录 一、背景知识:什么是 B-Tree 和 BTree? B-Tree(平衡多路查找树) BTree(B-Tree 的变种) 二、结构对比:一张图看懂 三、为什么 MySQL InnoDB 选择 BTree? 1. 范围查询更快 2…...
