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

学习ts(十)装饰器

定义

装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,访问符,属性或参数上,是一种在不改变原类和使用继承的情况下,动态的扩展对象功能。
装饰器使用@expression形式,其中expression必须评估为一个函数,该函数将在运行时调用,并带有有关装饰声明的信息。
前置操作

// tsconfig.json
{"compilerOptions": {"target": "ES5","experimentalDecorators": true}
}

使用

类装饰

类装饰器会把Class A的构造函数传入你的watcher函数当做第一个参数

const watcher: ClassDecorator = (target) => {target.prototype.age = 18target.prototype.getName = ():string=>{return 'hello'}
}
@watcher
class A {constructor() {}
}
const a = new A()
console.log((a as any).age);  // 18
console.log((a as any).getName());  //hello

装饰器工厂

如果想要传递参数,使装饰器变成类似工厂函数,只需要在装饰器函数内部再返回一个函数即可。

const watcher = (name: string): ClassDecorator => {return (target) => {target.prototype.age = 18target.prototype.getName = (): string => {return name}}}
@watcher('hello data')
class A {constructor() {}
}
const a = new A()
console.log((a as any).age); // 18
console.log((a as any).getName()); // hello data

装饰器组合

可以给一个类使用多个装饰器

const watcher = (name: string): ClassDecorator => {return (target) => {target.prototype.age = 18target.prototype.getName = (): string => {return name}}}const addAge = (age:number):ClassDecorator => {return (target) =>{target.prototype.addAge = (): number => {return age+1}}
}@watcher('hello data')  @addAge(20)
class A {constructor() {}
}
const a = new A()
console.log((a as any).age);
console.log((a as any).getName());
console.log((a as any).addAge());

方法/属性装饰器

装饰器参数为:

  • target:对象的原型:对于静态成员来说是类的构造函数,对于实例成员是类的原型对象
  • propertyKey:方法的名称
  • descriptor:方法的属性描述符
    这三个属性实际就是Object.defineProperty的三个参数,如果是类的属性,则没有传递第三个参数
const met: MethodDecorator = (...args) => {console.log(args)
}class A {constructor() {}@metgetName(): string {return 'hello'}
}const xx = new A()

在这里插入图片描述

// 声明装饰器修饰方法/属性
function method(target: any, propertyKey: string, descriptor: PropertyDescriptor) {descriptor.writable = false;
};function property(target: any, propertyKey: string) {// 修改属性target[propertyKey] = '11223'
}class Person {@propertyname: string;constructor() {}@methodsay() {return 'instance method';}
}const xmz = new Person();// 修改实例方法say
xmz.say = () => {return '5566'   //由于 descriptor.writable = false; 所以此处修改不生效
}
console.log(xmz.name)
console.log(xmz.say())  // nstance method

参数装饰

装饰器参数为:

  • target:当前对象的原型
  • propertyKey:参数的名称
  • index:参数数组中的位置
const init: ParameterDecorator = (...args)=>{console.log(args)
}
class A {constructor() {}getName(@init name: string = 'hello') {console.log(name) // [ {}, 'getName', 0 ]}
}

元数据

import data from './data.json'
import 'reflect-metadata'const Base = (base: string) => {return (target) => {target.prototype.base = base}
}const GetData = (url: string) => {console.log('getData run')const fn: MethodDecorator = (target: any, key, descriptor: PropertyDescriptor) => {const prop = Reflect.getMetadata('key', target)console.log(prop, 'prop')descriptor.value(prop ? data[prop] : data)}return fn;
}const Result = () => {console.log('result run')const fn: ParameterDecorator = (target: any, key, index) => {Reflect.defineMetadata('key', 'data', target)}return fn
}@Base('/api')
class Http {fileName: stringconstructor(name) {this.fileName = name}@GetData('json')getList(@Result() data: any) {console.log(data)}
}
const http = new Http('orange')

相关文章:

学习ts(十)装饰器

定义 装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,访问符,属性或参数上,是一种在不改变原类和使用继承的情况下,动态的扩展对象功能。 装饰器使用expression形式,其中expression必须…...

如何在 Opera 中启用DNS over HTTPS

DNS over HTTPS(基于HTTPS的DNS)是一种更安全的浏览方式,但大多数 Web 浏览器默认情况下不启用它。了解如何在 Opera 浏览器中启用该功能。 您可能不知道这一点,但您的网络浏览器并不像您希望的那样私密或安全。您会看到&#xff…...

STM32 F103C8T6学习笔记13:IIC通信—AHT10温湿度传感器模块

今日学习一下这款AHT10 温湿度传感器模块,给我的OLED手环添加上测温湿度的功能。 文章提供源码、测试工程下载、测试效果图。 目录 AHT10温湿度传感器: 特性: 连接方式: 适用场所范围: 程序设计: 设…...

QT基础使用:组件和代码关联(信号和槽)

自动关联 ui文件在设计环境下,能看到的组件可以使用鼠标右键选择“转到槽”就是开始组件和动作关联。 在自动关联这个过程中软件自动动作的部分 需要对前面头文件进行保存,才能使得声明的函数能够使用。为了方便,自动关联时先对所有文件…...

TCP最大连接数问题总结

最大TCP连接数量限制有:可用端口号数量、文件描述符数量、线程、内存、CPU等。每个TCP连接都需要以下资源,如图所示: 1、可用端口号限制 Q:一台主机可以有多少端口号?端口号与TCP连接?是否能修改&#x…...

【Docker】云原生利用Docker确保环境安全、部署的安全性、安全问题的主要表现和新兴技术产生

前言 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux或Windows操作系统的机器上,也可以实现虚拟化,容器是完全使用沙箱机制,相互之间不会有任何接口。 云原生利用Docker确保环境安全、部署的…...

explain各个字段代表的意思

id:联表查询是每个表的读取顺序,数字越大越先被读取。相同就需要通过table字段判断select_type:查询类型或者是其他操作类型(PRIMARY、UNION、UNION RESULT等)table:正在访问哪个表partitions:匹…...

【已解决】Windows10 pip安装报错:UnicodeDecodeError: ‘gbk‘ codec can‘t decode byte 0x98

环境:win10, Python3.9 在Pycharm安装YoloV5的依赖包时出现报错:UnicodeDecodeError: ‘gbk’ codec can’t decode byte 0x98 出现 ‘gbk’ codec can’t decode… 的报错一般是因为读取文件出现编码问题导致没法读取文件,因此可以在报错…...

goland 中的调试器 -- Evaluate

今天一个好朋友 找到我,问我关于goland中Evaluate 小计算器的使用方式,说实话,我在此之前也没用过这个东西,然后我就找一些相关文档,但是这类文档少的可怜,所以我就稍微研究一下,找找材料&#…...

你知道公司内部维基到底有哪些功能吗

维基指的是一种协作工作的平台,也就是开源的编辑系统。员工可以在企业维基里面进行存储、共享和协作之类的操作,将企业内部员工的知识共享聚集在一起。今天looklook将会详细讲讲公司内部维基具体到底有哪些功能,供大家参考。 公司内部维基的功…...

netdata监控服务器主机(包括Docker容器)

效果 Docker部署 创建挂载目录 mkdir -p /data/netdata/{netdatacache,netdatalib}docker运行 docker run -d --namenetdata \-p 19999:19999 \-v /data/netdata/netdatalib:/var/lib/netdata \-v /data/netdata/netdatacache:/var/cache/netdata \-v /etc/passwd:/host/etc…...

Mybatis学习|第一个Mybatis程序

1.创建一个数据库以及一个用户表,并插入三条数据用来测试 2.创建一个空的maven项目 在pom.xml中导入本次测试用到的三个依赖,mysql驱动、mybatis依赖、以及单元测试junit依赖 将这个 空的maven项目当成一个父项目,再创建一个空的maven子项目用…...

计算机网络MTU和MSS的区别

在计算机网络中,MTU代表最大传输单元(Maximum Transmission Unit),而MSS代表最大分节大小(Maximum Segment Size)。 1.MTU(最大传输单元): MTU是指在网络通信中&#x…...

redis学习笔记 - 进阶部分

文章目录 redis单线程如何处理并发的客户端,以及为何单线程快?redis的发展历程:redis单线程和多线程的体现:redis3.x单线程时代但性能很快的主要原因:redis4.x开始引入多线程:redis6/redis7引入多线程IO&am…...

SE5 - BM1684 人工智能边缘开发板入门指南 -- 模型转换、交叉编译、yolov5、目标追踪

介绍 我们属于SoC模式,即我们在x86主机上基于tpu-nntc和libsophon完成模型的编译量化与程序的交叉编译,部署时将编译好的程序拷贝至SoC平台(1684开发板/SE微服务器/SM模组)中执行。 注:以下都是在Ubuntu20.04系统上操…...

基于Java+SpringBoot+vue前后端分离英语知识应用网站设计实现

博主介绍:✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专…...

vue使用vue-router报错

报错1. app.js:172 Uncaught TypeError: vue_router__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor at eval (index.js:4:1) at ./src/router/index.js (app.js:108:1) at webpack_require (app.js:169:33) at fn (app.js:442:21) at eval (main.js:7:71) at ./…...

编写Dockerfile制作Web应用系统nginx镜像,生成镜像nginx:v1.1,并推送其到私有仓库。

环境: CentOS 7 Linux 3.10.0-1160.el7.x86_64 具体要求如下: (1)基于centos基础镜像; (2)指定作者信息; (3)安装nginx服务,将提供的dest目录…...

js 类、原型及class

js 一直允许定义类。ES6新增了相关语法(包括class关键字)让创建类更容易。新语法创建的类和老式的类原理相同。js 的类和基于原型的继承机制与Java等语言中的类和继承机制有着本质区别。 1 类和原型 类意味着一组对象从同一个原型对象继承属性。因此,原型对象是…...

day-30 代码随想录算法训练营 回溯part06

332.重新安排行程 思路&#xff1a;使用unordered_map记录起点机场对应到达机场&#xff0c;内部使用map记录到达机场的次数&#xff08;因为map会进行排序&#xff0c;可以求出最小路径&#xff09; class Solution { public:vector<string>res;unordered_map<stri…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

DeepSeek 赋能智慧能源:微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

BCS 2025|百度副总裁陈洋:智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...