对 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的性能才达到了实…...
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 (1)连接查询(JOIN) 内连接(INNER JOIN):返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

TDengine 快速体验(Docker 镜像方式)
简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能,本节首先介绍如何通过 Docker 快速体验 TDengine,然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker,请使用 安装包的方式快…...

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
STM32+rt-thread判断是否联网
一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接:3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯,要想要能够将所有的电脑解锁&#x…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...

[大语言模型]在个人电脑上部署ollama 并进行管理,最后配置AI程序开发助手.
ollama官网: 下载 https://ollama.com/ 安装 查看可以使用的模型 https://ollama.com/search 例如 https://ollama.com/library/deepseek-r1/tags # deepseek-r1:7bollama pull deepseek-r1:7b改token数量为409622 16384 ollama命令说明 ollama serve #:…...

毫米波雷达基础理论(3D+4D)
3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文: 一文入门汽车毫米波雷达基本原理 :https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器
拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件: 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...