【TS学习】(19)TS中的类

news2025/4/7 1:06:48

在 TypeScript 中,类(Class) 是面向对象编程的核心结构,用于封装数据和行为。TypeScript 的类继承了 JavaScript 的类特性,并增加了类型系统和高级功能的支持(如访问修饰符、存取器和装饰器)。


1. 属性

(1) 定义
  • 属性是类中存储数据的变量。
  • 可以使用类型注解为属性指定类型。
(2) 示例
class User {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

const user = new User("Alice", 30);
console.log(user.name); // 输出 "Alice"

在这里:

  • nameage 是类的属性,分别表示用户的姓名和年龄。

2. 构造函数

(1) 定义
  • 构造函数是一个特殊的方法,用于初始化类的实例。
  • 使用 constructor 关键字定义。
(2) 简化语法
  • TypeScript 支持直接在构造函数参数中声明并初始化属性。
示例
class User {
  constructor(public name: string, public age: number) {}
}

const user = new User("Alice", 30);
console.log(user.name, user.age); // 输出 "Alice 30"

在这里:

  • public 修饰符自动将构造函数参数声明为类的属性。

3. 方法

(1) 定义
  • 方法是类中定义的函数,用于实现特定的行为。
  • 方法可以通过 this 访问类的属性和其他方法。
示例
class User {
  name: string;
  age: number;

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  greet(): void {
    console.log(`Hello, my name is ${this.name}. I am ${this.age} years old.`);
  }
}

const user = new User("Alice", 30);
user.greet(); // 输出 "Hello, my name is Alice. I am 30 years old."

在这里:

  • greet 是一个方法,用于打印用户信息。

4. 存取器(Accessors)

(1) 定义
  • 存取器是一种特殊的属性,允许通过 getset 方法控制对某个属性的访问和修改。
  • 存取器提供了封装和验证的能力。
示例
class User {
  private _age: number;

  constructor(age: number) {
    this._age = age;
  }

  // Getter
  get age(): number {
    return this._age;
  }

  // Setter
  set age(value: number) {
    if (value < 0) {
      throw new Error("Age cannot be negative");
    }
    this._age = value;
  }
}

const user = new User(30);
console.log(user.age); // 输出 30

user.age = 25; // 设置新的值
console.log(user.age); // 输出 25

// user.age = -5; // 报错:Age cannot be negative

在这里:

  • _age 是私有属性,外部无法直接访问。
  • get age()set age(value) 提供了对 _age 的安全访问和修改。

5. 访问修饰符

(1) 定义
  • 访问修饰符用于控制类成员的可见性。
  • TypeScript 提供了三种访问修饰符:publicprivateprotected
(2) 常见修饰符
  • public:默认修饰符,成员可以在任何地方访问。
  • private:成员只能在类内部访问。
  • protected:成员可以在类内部和子类中访问。
示例
class User {
  public name: string; // 公有属性
  private _age: number; // 私有属性
  protected role: string; // 受保护属性

  constructor(name: string, age: number, role: string) {
    this.name = name;
    this._age = age;
    this.role = role;
  }

  public getAge(): number {
    return this._age;
  }

  protected getRole(): string {
    return this.role;
  }
}

class Admin extends User {
  override getRole(): string {
    return `Admin: ${super.getRole()}`;
  }
}

const admin = new Admin("Alice", 30, "Super Admin");
console.log(admin.name); // 输出 "Alice"
console.log(admin.getAge()); // 输出 30
console.log(admin.getRole()); // 报错:'getRole' 是受保护方法

在这里:

  • name 是公有属性,外部可以直接访问。
  • _age 是私有属性,外部无法直接访问。
  • role 是受保护属性,只有子类可以访问。

6. 装饰器(Decorators)

(1) 定义
  • 装饰器是一种特殊的功能,用于在类或类成员上添加元数据或修改其行为。
  • 装饰器通常用于框架开发(如 Angular)或元编程场景。
(2) 启用装饰器
  • 需要在 tsconfig.json 中启用实验性装饰器支持:
    {
      "compilerOptions": {
        "experimentalDecorators": true
      }
    }
    
示例

以下是一个简单的装饰器示例:

示例 1:类装饰器
function logClass(target: Function) {
  console.log(`Class ${target.name} has been defined.`);
}

@logClass
class User {
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

const user = new User("Alice"); // 输出 "Class User has been defined."
示例 2:方法装饰器
function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Calling method '${propertyKey}' with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };
}

class Calculator {
  @logMethod
  add(a: number, b: number): number {
    return a + b;
  }
}

const calculator = new Calculator();
console.log(calculator.add(2, 3));
// 输出:
// Calling method 'add' with arguments: 2,3
// 5

在这里:

  • @logClass 是一个类装饰器,用于记录类的定义。
  • @logMethod 是一个方法装饰器,用于记录方法调用及其参数。

7. 总结

特性描述
属性用于存储数据,支持类型注解。
构造函数用于初始化类的实例,支持简化语法。
方法用于实现行为,可以通过 this 访问类的属性和其他方法。
存取器提供对属性的安全访问和修改,支持封装和验证逻辑。
访问修饰符控制类成员的可见性(publicprivateprotected)。
装饰器用于在类或类成员上添加元数据或修改行为,常用于框架开发。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2326647.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

UI设计系统:如何构建一套高效的设计规范?

UI设计系统&#xff1a;如何构建一套高效的设计规范&#xff1f; 1. 色彩系统的建立与应用 色彩系统是设计系统的基础之一&#xff0c;它不仅影响界面的整体美感&#xff0c;还对用户体验有着深远的影响。首先&#xff0c;设计师需要定义主色调、辅助色和强调色&#xff0c;并…

【计算机网络】记录一次校园网无法上网的解决方法

问题现象 环境&#xff1a;实训室教室内时间&#xff1a;近期突然出现 &#xff08;推测是学校在施工&#xff0c;部分设备可能出现问题&#xff09;症状&#xff1a; 连接校园网 SWXY-WIFI 后&#xff1a; 连接速度极慢偶发无 IP 分配&#xff08;DHCP 失败&#xff09;即使分…

第二十一章:Python-Plotly库实现数据动态可视化

Plotly是一个强大的Python可视化库&#xff0c;支持创建高质量的静态、动态和交互式图表。它特别擅长于绘制三维图形&#xff0c;能够直观地展示复杂的数据关系。本文将介绍如何使用Plotly库实现函数的二维和三维可视化&#xff0c;并提供一些优美的三维函数示例。资源绑定附上…

系统思考反馈

最近交付的都是一些持续性的项目&#xff0c;越来越感觉到&#xff0c;系统思考和第五项修炼不只是简单的一门课程&#xff0c;它们能真正融入到我们的日常工作和业务中&#xff0c;帮助我们用更清晰的思维方式解决复杂问题&#xff0c;推动团队协作&#xff0c;激发创新。 特…

【C++】vector常用方法总结

&#x1f4dd;前言&#xff1a; 在C中string常用方法总结中我们讲述了string的常见用法&#xff0c;vector中许多接口与string类似&#xff0c;作者水平有限&#xff0c;所以这篇文章我们主要通过读vector官方文档的方式来学习vector中一些较为常见的重要用法。 &#x1f3ac;个…

2025年数智化电商产业带发展研究报告260+份汇总解读|附PDF下载

原文链接&#xff1a;https://tecdat.cn/?p41286 在数字技术与实体经济深度融合的当下&#xff0c;数智化产业带正成为经济发展的关键引擎。 从云南鲜花产业带的直播热销到深圳3C数码的智能转型&#xff0c;数智化正重塑产业格局。2023年数字经济规模突破53.9万亿元&#xff…

Linux中常用服务器监测命令(性能测试监控服务器实用指令)

1.查看进程 ps -ef|grep 进程名以下指令需要先安装:sysstat,安装指令: yum install sysstat2.查看CPU使用情况(间隔1s打印一个,打印6次) sar -u 1 63.#查看内存使用(间隔1s打印一个,打印6次) sar -r 1 6

基于 GEE 的区域降水数据可视化:从数据处理到等值线绘制

目录 1 引言 2 代码功能概述 3 代码详细解析 3.1 几何对象处理与地图显示 3.2 加载 CHIRPS 降水数据 3.3 筛选不同时间段的降水数据 3.4 绘制降水时间序列图 3.5 计算并可视化短期和长期降水总量 3.6 绘制降水等值线图 4 总结 5 完整代码 6 运行结果 1 引言 在气象…

曲线拟合 | Matlab基于贝叶斯多项式的曲线拟合

效果一览 代码功能 代码功能简述 目标&#xff1a;实现贝叶斯多项式曲线拟合&#xff0c;动态展示随着数据点逐步增加&#xff0c;模型后验分布的更新过程。 核心步骤&#xff1a; 数据生成&#xff1a;在区间[0,1]生成带噪声的正弦曲线作为训练数据。 参数设置&#xff1a…

Qt6调试项目找不到Bluetooth Component蓝牙组件

错误如图所示 Failed to find required Qt component "Bluetooth" 解决方法&#xff1a;搜索打开Qt maintenance tool 工具 打开后&#xff0c;找到这个Qt Connectivity&#xff0c;勾选上就能解决该错误

JAVA- 锁机制介绍 进程锁

进程锁 基于文件的锁基于Socket的锁数据库锁分布式锁基于Redis的分布式锁基于ZooKeeper的分布式锁 实际工作中都是集群部署&#xff0c;通过负载均衡多台服务器工作&#xff0c;所以存在多个进程并发执行情况&#xff0c;而在每台服务器中又存在多个线程并发的情况&#xff0c;…

Java Spring Boot 与前端结合打造图书管理系统:技术剖析与实现

目录 运行展示引言系统整体架构后端技术实现后端代码文件前端代码文件1. 项目启动与配置2. 实体类设计3. 控制器设计4. 异常处理 前端技术实现1. 页面布局与样式2. 交互逻辑 系统功能亮点1. 分页功能2. 搜索与筛选功能3. 图书操作功能 总结 运行展示 引言 本文将详细剖析一个基…

深入剖析JavaScript多态:从原理到高性能实践

摘要 JavaScript多态作为面向对象编程的核心特性&#xff0c;在动态类型系统的支持下展现了独特的实现范式。本文深入解析多态的三大实现路径&#xff1a;参数多态、子类型多态与鸭子类型&#xff0c;详细揭示它们在动态类型系统中的理论基础与实践意义。结合V8引擎的优化机制…

GalTransl开源程序支持GPT-4/Claude/Deepseek/Sakura等大语言模型的Galgame自动化翻译解决方案

一、软件介绍 文末提供程序和源码下载 GalTransl是一套将数个基础功能上的微小创新与对GPT提示工程&#xff08;Prompt Engineering&#xff09;的深度利用相结合的Galgame自动化翻译工具&#xff0c;用于制作内嵌式翻译补丁。支持GPT-4/Claude/Deepseek/Sakura等大语言模型的…

TGES 2024 | 基于空间先验融合的任意尺度高光谱图像超分辨率

Arbitrary-Scale Hyperspectral Image Super-Resolution From a Fusion Perspective With Spatial Priors TGES 2024 10.1109/TGRS.2024.3481041 摘要&#xff1a;高分辨率高光谱图像&#xff08;HR-HSI&#xff09;在遥感应用中起着至关重要的作用。单HSI超分辨率&#xff…

算法基础_基础算法【高精度 + 前缀和 + 差分 + 双指针】

算法基础_基础算法【高精度 前缀和 差分 双指针】 ---------------高精度---------------791.高精度加法题目介绍方法一&#xff1a;代码片段解释片段一&#xff1a; 解题思路分析 792. 高精度减法题目介绍方法一&#xff1a;代码片段解释片段一&#xff1a; 解题思路分析 7…

Python数据类型-list

列表(List)是Python中最常用的数据类型之一&#xff0c;它是一个有序、可变的元素集合。 1. 列表基础 创建列表 empty_list [] # 空列表 numbers [1, 2, 3, 4, 5] # 数字列表 fruits [apple, banana, orange] # 字符串列表 mixed [1, hello, 3.14, True] # 混合类型…

如何使用cpp操作香橙派GPIO --使用<wiringPi.h>

香橙派是国产SBC &#xff0c;对标树莓派。不过国内的开发环境确实挺惨的&#xff0c;没多少帖子讨论。楼主决定从今天起&#xff0c;不定期更新香橙派的教程。 今天的教程是如何使用香橙派下载wiringOP 并使用CPP操作GPIO 操作GPIO 下载wiringPi 检查git 版本克隆wiringPi…

nacos-sdk-go v2.29 中一个拼写错误,我定位了3个小时 ……

文章目录 问题背景问题现象问题定位解决方案经验总结 问题背景 今天在给项目增加服务注册和发现功能时,选择了 nacos 作为服务注册中心。在使用 nacos-sdk-go v2.29 版本进行开发时,遇到了一个令人啼笑皆非的问题,足足花了3个小时才找到原因。 问题现象 在实现服务订阅通知功…

Linux中的文件寻址

Linux的层级结构 在Linux中一切皆文件 其中 要注意在命令行中看实际选择写哪一种路径 相对路径 绝对路径名称的简写&#xff0c;省略了用户当前所在的系统位置此名称只有在管理当前所在系统目录中子文件时才能使用系统中不以/开有的文件名称都为相对路径在程序操作时会自动…