当前位置: 首页 > news >正文

对 TypeScript 中类是怎么理解的?都有哪些应用场景?

在 TypeScript 中,类(class)是面向对象编程的核心构造之一,它允许你创建具有特定属性和方法的对象模板。TypeScript 的类概念和 JavaScript 中的类基本相同,但它提供了额外的类型检查和静态类型系统,从而增强了代码的安全性和可维护性。

1. TypeScript 中的类概述

TypeScript 中的类与 JavaScript 类非常相似,支持属性、构造函数、方法、访问修饰符(publicprivateprotected)、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 类具有 nameage 两个属性,并且有一个构造函数用于初始化这些属性。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 中&#xff0c;类&#xff08;class&#xff09;是面向对象编程的核心构造之一&#xff0c;它允许你创建具有特定属性和方法的对象模板。TypeScript 的类概念和 JavaScript 中的类基本相同&#xff0c;但它提供了额外的类型检查和静态类型系统&#xff0c;从而增…...

2024“龙信杯“电子数据取证竞赛-服务器取证题目Writeup

服务器检材-分析 前置 提示&#xff1a;该服务器做了登录密码校验配置&#xff0c;如果没有拿到服务器的密码而直接仿真服务器&#xff0c;输入密码进入系统后&#xff0c;服务器会将部分数据给自动删除 前提&#xff1a;无 因为我们仿真进入服务器会自动删除文件&#xff0…...

Label-studio-ml-backend 和YOLOV8 YOLO11自动化标注,目标检测,实例分割,图像分类,关键点估计,视频跟踪

这里写目录标题 1.目标检测 Detection2.实例分割 segment3.图像分类 classify4.关键点估计 Keypoint detection5.视频帧检测 video detect6.视频帧分类 video classify7.旋转目标检测 obb detect8.替换yolo11模型 给我点个赞吧&#xff0c;谢谢了附录coco80类名称 笔记本 华为m…...

Elasticsearch Windows版的安装及启动

一、下载 https://www.elastic.co/cn/downloads/past-releases#elasticsearch 如下图 选择版本 我用的是7.17.5 你换成你需要的版本 二 使用 1.解压 解压完如图 2.启动 进入 bin 文件目录&#xff0c;双击运行 elasticsearch.bat 文件启动 ES 服务 出现报错 Cause…...

解决 VMware 嵌套虚拟化提示 关闭“侧通道缓解“

最近给电脑做了新版的 Windows 11 LTSC操作系统&#xff0c;在启动VMware Workstation时&#xff0c;提示"此虚拟机已启用侧通道缓解&#xff0c;可增强安全性&#xff0c;但也会降低性能"&#xff0c;但是我没有启用 Hyper-V 相关的任何功能以及 WSL&#xff0c; 从…...

基于Redis实现的手机短信登入功能

目录 开发准备 注册阿里短信服务 依赖坐标 阿里短信 依赖 mybatis-plus 依赖 redis 依赖 配置文件 导入数据库表 短信发送工具类 生成随机验证码的工具类 校验合法手机号的工具类 ThreadLocal 线程工具类 消息工具类 基于 session 的短信登录的问题 开发教程 Redis 结构设计 …...

C# NetworkStream用法

一、注意事项&#xff1a; NetworkStream 是稳定的&#xff0c;面向连接的&#xff0c;所以它只适合 TCP 协议的环境下工作所以一旦在 UDP环境中&#xff0c;虽然编译不会报错&#xff0c;但是会跳出异常。如果用构造产生NetworkStream的实例&#xff0c;则必须使用连接的Socke…...

华三预赛从零开始学习笔记(每日编辑,复习完为止)

知识点分布 路由交换技术基础 计算机网络基本概念 计算机网络基本概念&#xff1a; 很多电脑和设备通过电线或无线信号连在一起&#xff0c;可以互相“说话”和“分享东西” 网络的主要形式和发展历程&#xff1a; 诞生阶段-最早的计算机网络是以单个计算机为中心的联机系统-终…...

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:超级用户帐号后门

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…...

【无人机/平衡车/机器人】详解STM32+MPU6050姿态解算—卡尔曼滤波+四元数法+互补滤波

详解STM32+MPU6050姿态解算—卡尔曼滤波+四元数法+互补滤波 效果: 更多单片机项目,单片机项目合集列表目录与专栏说明: 单片机项目合集列表与专栏说明——Excel合集列表目录查阅(持续更新)-CSDN博客​编辑https://archie.blog.csdn.net/article/details/142381401https:/…...

数据结构-8.Java. 七大排序算法(上篇)

本篇博客给大家带来的是排序的知识点, 由于时间有限, 分两天来写, 上篇主要实现 前四种排序算法: 直接插入, 希尔, 选择, 堆排。 文章专栏: Java-数据结构 若有问题 评论区见 欢迎大家点赞 评论 收藏 分享 如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 …...

YOLOV5/rknn生成可执行文件部署在RK3568上

接上一篇文章best-sim.rknn模型生成好后&#xff0c;我们要将其转换成可执行文件运行在RK3568上&#xff0c;这一步需要在rknpu上进行&#xff0c;在强调一遍&#xff01;&#xff01;rknpu的作用是可以直接生成在开发板上运行的程序 退出上一步的docker环境 exit1.复制best-…...

java http body的格式 ‌application/x-www-form-urlencoded‌不支持文件上传

在Java中&#xff0c;HTTP请求的body部分可以包含多种格式的数据&#xff0c;主要包括以下几种‌&#xff1a; ‌application/x-www-form-urlencoded‌&#xff1a;这种格式将数据编码成键值对的形式&#xff0c;键和值都进行了URL编码&#xff0c;键值对之间用&符号连接。…...

GPU服务器厂家:为什么要选择 GPU 服务器?

文章来源于百家号&#xff1a;GPU服务器厂家 嘿&#xff0c;各位小伙伴们&#xff01;今天咱来聊聊为啥要选择 GPU 服务器&#xff0c;特别是定制化的那种哦。 你们知道吗&#xff1f;现在定制化 GPU 服务器那可是超火的&#xff0c;简直就是科研项目的超强 “外挂”&#x…...

Python操作neo4j库py2neo使用之py2neo 删除及事务相关操作(三)

Python操作neo4j库py2neo使用之py2neo 删除及事务相关操作&#xff08;三&#xff09; 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文件时隐藏文件方式一&#xff1a;创建.gitignore文件&#xff08;推荐&#xff09;方式二&#xff1a;‌通过File Types设置隐藏文件方式三&#xff1a;通过Git配置忽略文件‌&#xff08;不推荐&#xff09;总结 二、可能遇到的问题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…...

观察者模式和订阅模式

观察者模式和订阅模式在概念上是相似的&#xff0c;它们都涉及到一个对象&#xff08;通常称为“主题”或“发布者”&#xff09;和多个依赖对象&#xff08;称为“观察者”或“订阅者”&#xff09;之间的关系。然而&#xff0c;尽管它们有相似之处&#xff0c;但在某些方面也…...

基于ToLua的C#和Lua内存共享方案保姆级教程

C#和Lua内存共享方案保姆级教程 前言 在介绍C#和Lua内存共享方案之前,先介绍下面两个点来支撑这个方案的必要性 跨语言交互很费 Lua和C#交互最早是基于反射的方式实现的,后来为了提升性能发展成Luajit+C#静态方法导出注入到lua虚拟机的方式至此Lua+Unity的性能才达到了实…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 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&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;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 提…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...