TypeScript装饰器 -- 【学到最后流眼泪,哭的好狼狈~】

简单介绍:

装饰器本质是一种特殊的函数,它可以对:类、属性、方法、参数进行扩展;同时能让代码更简洁。

装饰器分类(5种):

  1. 类装饰器
  2. 属性装饰器
  3. 方法装饰器
  4. 访问器装饰器
  5. 参数装饰器

接上文 TypeScript完整学习 ,【自动化编译中查看】,终端输入 tsc --init 后,我们需要在tsconfig.json文件中打开"experimentalDecorators": true, 设置;终端输入tsc --watch来监视目录中所有的.ts 文件变化。

类装饰器:

类装饰器是一个应用在类声明上的函数,可以为类添加额外的功能,或添加额外的逻辑。

基本语法:

// 装饰器 Demo函数会在Person类定义时执行,参数说明:target参数是被装饰的类,即Person
function Demo(target: Function) {console.log(target);/**打印结果:* class Person {  *  constructor(name, age) *      { this.name = name; * this.age = age;}}* */
}@Demo
class Person {constructor(public name: string, public age: number) { }
}

应用举例:

需求:定义一个装饰器,实现Person实例调用 toString 时返回 JSON.stringify 的执行结果

// 装饰器
function CustomString(target: Function) {target.prototype.toString =  function(){// 这里要返回的是target的实例对象,所以是thisreturn JSON.stringify(this)}// seal 对指定对象进行封锁,不允许在traget的原型链上做文章Object.seal(target.prototype)
}@CustomString
class Person {constructor(public name: string, public age: number) { }
}const p1 = new Person('张三', 19)
console.log(p1.toString()); //打印结果为:{"name":"张三","age":19}

关于返回值:

类装饰器有返回值:若类装饰器返回一个新的类,那这个新类将替换掉被装饰的类。
类装饰器无返回值:若类装饰器无返回值或返回值为 undefined ,那被装饰的类不会被替换。

// 装饰器
function Demo(target: Function) {return class {test() {console.log(200);console.log(300);console.log(400);}}
}@Demo
class Person {test() {console.log(100);}
}console.log(Person);
/**打印结果:
class {test() {console.log(200);console.log(300);console.log(400);}
}
*/

关于构造类型:

在TypeScript中,Function 类型所表示的范围十分广泛,包括:普通函数、箭头函数、方法等等…但Function类型的函数不是都可以被new关键字实例化,例如:箭头函数是不能被实例化的。那么在TypeScript 中如何声明一个构造类型呢?有以下两种方法:
第一种 ➡ 仅声明构造类型:
完整代码:

// 定义Constructor类型,其含义是构造类型
type Constructor = new (...args: any[]) => {}//  需求:fn是一个类
function test(fn: Constructor) { }class Person { }test(Person)
type Constructor = new (...args: any[]) => {}
介绍
new该类型是可以用new操作符调用
...args构造器可以接收【任意数量】的参数
any[]构造器可以接收【任意类型】的参数
{}返回的类型是对象(非null、非undefined的对象)

第二种 ➡ 声明构造类型 + 指定静态属性:

// 定义一个构造函数,且包含一个静态属性wife
type Constructor = {new (...args: any[]):{}wife:string //静态属性
}//  需求:fn是一个类
function test(fn: Constructor) { }class Person { // static 关键字:声明静态成员变量、方法和代码块static wife:string
}test(Person)

替换被装饰的类:return

对于高级的一些装饰器,不仅仅是覆盖一个原型上的方法,还要有更多功能,例如添加新的方法和状态。
举例: 需求是设计一个LogTime 装饰器,可以给实例添加一个属性,用于记录实例对象的创建时间,再创建一个方法用于读取创建时间。

type Constructor = new (...args: any[]) => {}interface Person {getTime(): void
}// 泛型约束 <T extends Constructor>
function LogTime<T extends Constructor>(target: T) {return class extends target {createdTime: Dateconstructor(...args: any[]) {super(...args)this.createdTime = new 

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

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

相关文章

线程安全的单例模式

单列模式是校考中最常考的设计模式之一 啥是设计模式&#xff1f; 设计模式就好比好比向其中的“棋谱”&#xff0c;红方当头炮&#xff0c;黑方马来跳。针对红方的一些走法黑方有一些固定的套路。按照套路来走局势就不会吃亏。 软件开发中有很对常见的“问题场景‘&#xff1a…

【云岚到家】-day09-1-项目迁移6-秒杀抢购介绍

【云岚到家】-day09-1-项目迁移6-秒杀抢购介绍 1 购物车1.1 交互流程1.2 Redis数据结构1.3 表设计1.4 定时同步购物车 2 签到活动2.1 需求分析2.2 系统设计2.2.1 表设计2.2.2 接口设计2.2.3 如何计算连续签到天数2.2.4 如何获取匹配签到奖励规则2.2.5 签到代码 3 秒杀抢购介绍1…

探索LINQ在C#中的应用:从基本查询到数据联接

LINQ&#xff08;语言集成查询&#xff09;是微软为.NET框架开发的一种强大功能&#xff0c;于2007年作为C# 3.0和Visual Basic .NET 9.0的一部分引入。LINQ的诞生旨在提供一种一致且直观的方式来查询和操作数据&#xff0c;无论数据来源是内存中的集合、数据库还是XML文档。 …

FileLink如何帮助医疗行业实现安全且高效的跨网文件交换

在当今数字化时代&#xff0c;医疗行业在快速发展的同时&#xff0c;也面临着数据安全和信息流转效率的双重挑战。患者的健康记录、影像数据、检查报告等大量敏感信息需要在不同医院、诊所、实验室和保险公司之间高效、迅速地传递。然而&#xff0c;传统的邮件、传真和纸质文件…

windows工具 -- 一个定时播放音乐并延迟锁屏的bat脚本(专注模式) 每隔45分钟电脑自动锁屏

目的 由于静脉曲张比较难受, 不能长时间坐着, 需要有一个强迫休息的功能: 工作45分钟45分钟到了, 自动播放音乐, 并提示30s后进行锁屏 创建bat脚本 创建一个 .txt 文本文件, 然后修改后缀名为 .bat 右键记事本打开, 复制以下代码保存 echo off :: 等待45分钟 TIMEOUT /T 2700…

opencv_相关的问题

Debug模型下运行&#xff0c;在命令行窗口会有一些error相关的log信息。 通过调整log的等级&#xff0c;屏蔽掉INFO的log信息 #include <opencv2/core/utils/logger.hpp>cv::utils::logging::setLogLevel(cv::utils::logging::LOG_LEVEL_ERROR);

深度学习-44-大模型预训练的数据预处理及大模型的分类

文章目录 1 大模型的分类1.1 按任务类型分类1.1.1 生成式模型1.1.2 判别式模型1.1.3 混合模型1.2 按数据模态分类1.2.1 单模态模型1.2.2 多模态模型1.3 按训练方法分类1.3.1 预训练模型1.3.2 从零训练模型1.3.3 迁移学习模型1.4 按应用领域分类1.4.1 自然语言处理模型1.4.2 计算…

zabbix安装基础配置

服务器准备&#xff0c;两台服务器 创建zabbix用户组&#xff0c;新增zabbix用户&#xff0c;并将zabbix用户加入zabbix用户组&#xff0c;设置zabbix用户不允许登录系统权限 [rootlocalhost ~]# groupadd zabbix [rootlocalhost ~]# useradd -g zabbix zabbix [rootlocalhost…

点云的多尺度计算

1.计算点云多尺度特征的方法 1) K近邻,然后通过VoxelGrid进行下采样。 参考文献: Timo Hackel, J. D. W., Konrad Schindler "FAST SEMANTIC SEGMENTATION OF 3D POINT CLOUDS WITH STRONGLY VARYING DENSITY." Schindler, T. H. J. D. W. K. "Contour dete…

如何将各类GIS格式数据转换为带坐标信息的CVS或EXCEL格式

介绍如何利用GIS数据转换器-矢量将各类GIS格式数据&#xff08;SHP\TAB\KML\GEOJSON\GPKG\dxf等&#xff09;转换为带坐标信息的CVS或EXCEL格式。 打开GIS数据转换器-矢量 2.选择要转换的矢量数据 3.选择要输出的格式为CSV或微软开放表格格式 4.选择输出字段 5.选择输出目录 6…

Latex之LNCS模板——Title Suppressed Due to Excessive Length

1、问题描述 使用LNCS模板时&#xff0c;文章右上角显示“Title Suppressed Due to Excessive Length”。原因&#xff1a;文章的标题太长&#xff0c;放不下。 2、解决办法 使用 \titlerunning{} 设置一个短标题。

DPI-MoCo:基于深度先验图像约束的运动补偿重建用于四维锥形束CT (4D CBCT)|文献速递-基于深度学习的病灶分割与数据超分辨率

Title 题目 DPI-MoCo: Deep Prior Image ConstrainedMotion Compensation Reconstruction for 4D CBCT DPI-MoCo&#xff1a;基于深度先验图像约束的运动补偿重建用于四维锥形束CT (4D CBCT) 01 文献速递介绍 安装在直线加速器上的N板锥束计算机断层扫描&#xff08;CBCT&…

6大国有银行软开的薪资待遇清单

牛客上刷到一条关于计算机专业值得去的银行软开清单,其中对 6 大国有银行软开的薪资待遇分析我觉得很有必要同步给大家看一看。 截图信息来自牛客的漫长白日梦 其中邮储软开是最值得推荐的(offer 投票没输过),二线城市转正后第一个完整年的收入在 30 万左右,一线城市更高…

深度学习之Dropout

1 Dropout 系列问题 1.1 为什么要正则化&#xff1f; 深度学习可能存在过拟合问题——高方差&#xff0c;有两个解决方法&#xff0c;一个是正则化&#xff0c;另一个是准备更多的数据&#xff0c;这是非常可靠的方法&#xff0c;但你可能无法时时刻刻准备足够多的训练数据或…

京东AI单旋旋转验证码98准确率通杀方案

注意,本文只提供学习的思路,严禁违反法律以及破坏信息系统等行为,本文只提供思路 如有侵犯,请联系作者下架 本文滑块识别已同步上线至OCR识别网站: http://yxlocr.nat300.top/ocr/other/12 京东单旋验证码最近更新了,使用AI生成,要求识别角度,以下是部分数据集: 接下…

three.js 如何简单的实现场景的雾

three.js 如何简单的实现场景的雾 https://threehub.cn/#/codeMirror?navigationThreeJS&classifybasic&idsceneFog import * as THREE from three import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js import { GLTFLoader } from three…

算法定制LiteAIServer摄像机实时接入分析平台烟火检测算法的主要功能

在现代社会&#xff0c;随着人工智能技术的飞速发展&#xff0c;智能监控系统在公共安全领域的应用日益广泛。其中&#xff0c;烟火检测作为预防火灾的重要手段&#xff0c;其准确性和实时性对于减少火灾损失、保障人民生命财产安全具有重要意义。而算法定制LiteAIServer烟火检…

C++中sizeof运算符的案例分析

分析案例 在网上看到一个关于sizeof疑问的文章&#xff0c;所以就想认真研究下&#xff0c;例子代码如下&#xff1a; #include<iostream> using namespace std; int main(void) {cout << sizeof("123456789") << endl; //10cout << siz…

centos7 部署 Ollama,过程及遇到的问题(上篇)

背景&#xff1a;为了搭建 Dify llama3 实现大模型本地化学习。 材料&#xff1a; 1、centos 7.x 2、网络要通 制作&#xff1a; 1、更新YUM源 1、备份yum源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup2、下载阿里yum wget -O /e…

openGauss数据库-头歌实验1-5 修改数据库

一、查看表结构与修改表名 &#xff08;一&#xff09;任务描述 本关任务&#xff1a;修改表名&#xff0c;并能顺利查询到修改后表的结构。 &#xff08;二&#xff09;相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 1.如何查看表的结构&#xff1b; 2.如…