对 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的性能才达到了实…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制,因此这个了16进制的数据既可以翻译成为这个机器码,也可以翻译成为这个国标码,所以这个时候很容易会出现这个歧义的情况; 因此,我们的这个国…...
XCTF-web-easyupload
试了试php,php7,pht,phtml等,都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接,得到flag...
相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了: 这一篇我们开始讲: 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下: 一、场景操作步骤 操作步…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
selenium学习实战【Python爬虫】
selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...
