TypeScript 装饰器都有那些应用场景?如何更快的上手?
TypeScript 装饰器简介
在 TypeScript 中,装饰器(Decorators)是一种特殊的语法,用于在类、类方法、属性、访问器等上动态地添加行为或修改现有行为。装饰器可以用来增强类的功能、修改方法的行为,或者修改类的元数据等。它们通常用于元编程和 AOP(面向切面编程)等场景。
装饰器在 TypeScript 中的实现基于 ECMAScript 提案的实验性特性,但目前 TypeScript 已经支持了装饰器的编写和使用。需要注意的是,装饰器特性必须通过 experimentalDecorators 编译选项开启。
开启装饰器支持
在 tsconfig.json 中配置:
{"compilerOptions": {"experimentalDecorators": true}
}
装饰器的类型
装饰器可以应用于以下几种目标:
- 类装饰器 (Class Decorators):应用于类构造函数,修改类的行为或元数据。
- 方法装饰器 (Method Decorators):应用于类的方法,允许修改方法的属性或行为。
- 属性装饰器 (Property Decorators):应用于类的属性,用于修改或定义属性的元数据。
- 访问器装饰器 (Accessor Decorators):应用于类的 getter 或 setter 方法。
- 参数装饰器 (Parameter Decorators):应用于方法参数,主要用于修改或注入方法参数的元数据。
装饰器的应用场景
装饰器常用于以下几个场景:
- 类的功能增强:如注入依赖、日志记录、权限校验等。
- 方法行为修改:例如,控制方法的执行、缓存机制、性能监控等。
- 自动化注入:在一些框架中,装饰器用来自动注入依赖,比如 Angular 中的服务注入。
- 性能分析和日志:自动记录函数的调用时间、参数等。
示例:使用装饰器的实际场景
假设我们有一个项目需要记录方法调用的日志,并且需要验证用户是否有权限执行某些操作。我们可以使用装饰器来实现这些功能。
1. 类装饰器
类装饰器通常用于增强类的行为,比如记录日志、依赖注入等。
function Logger(constructor: Function) {console.log(`Class ${constructor.name} is instantiated.`);
}@Logger
class UserService {constructor() {console.log("UserService instance created.");}
}const userService = new UserService();
解释:Logger 装饰器会在类实例化时打印出该类的名称。在 @Logger 之后,当 UserService 被实例化时,控制台输出 Class UserService is instantiated.。
2. 方法装饰器
方法装饰器可以修改方法的行为或添加额外的功能。我们可以使用方法装饰器来记录日志,验证权限等。
function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;descriptor.value = function (...args: any[]) {console.log(`Method ${propertyName} is called with args: ${args}`);return originalMethod.apply(this, args);};
}class UserService {@LoggetUser(userId: number) {console.log(`Fetching user with ID: ${userId}`);}
}const userService = new UserService();
userService.getUser(42);
解释:@Log 装饰器会修改 getUser 方法,在调用该方法时记录日志,打印出方法名和传入的参数。输出结果为:
Method getUser is called with args: [42]
Fetching user with ID: 42
3. 属性装饰器
属性装饰器可以用来修改类的属性行为或元数据。例如,我们可以用它来设置字段的可访问性或记录日志。
function Observable(target: any, propertyName: string) {let value = target[propertyName];const getter = () => {console.log(`Getting value of ${propertyName}: ${value}`);return value;};const setter = (newVal: any) => {console.log(`Setting value of ${propertyName} to: ${newVal}`);value = newVal;};Object.defineProperty(target, propertyName, {get: getter,set: setter,});
}class User {@Observablename: string;constructor(name: string) {this.name = name;}
}const user = new User("Alice");
user.name = "Bob"; // Console logs: Setting value of name to: Bob
console.log(user.name); // Console logs: Getting value of name: Bob
解释:@Observable 装饰器为 name 属性创建了 getter 和 setter 方法,控制属性的访问并记录相关日志。
4. 权限校验的实际应用
装饰器常用于权限校验等场景,检查用户是否有权限执行某个方法。例如:
function PermissionRequired(permission: string) {return function (target: any, propertyName: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;descriptor.value = function (...args: any[]) {const userPermissions = ["READ", "WRITE"]; // 假设的用户权限if (!userPermissions.includes(permission)) {console.log(`Permission denied. Missing permission: ${permission}`);return;}return originalMethod.apply(this, args);};};
}class DocumentService {@PermissionRequired("WRITE")editDocument() {console.log("Document is being edited.");}
}const documentService = new DocumentService();
documentService.editDocument(); // 如果权限包含 "WRITE",则输出 "Document is being edited."
解释:@PermissionRequired 装饰器会在方法执行前检查当前用户的权限。如果权限不足,则拒绝执行方法。
组合使用装饰器
在实际项目中,装饰器可以进行组合使用,进行多种功能的扩展。例如,我们可以结合使用日志记录和权限校验装饰器:
function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;descriptor.value = function (...args: any[]) {console.log(`Calling method ${propertyName} with arguments: ${args}`);return originalMethod.apply(this, args);};
}function PermissionRequired(permission: string) {return function (target: any, propertyName: string, descriptor: PropertyDescriptor) {const originalMethod = descriptor.value;descriptor.value = function (...args: any[]) {const userPermissions = ["READ", "WRITE"];if (!userPermissions.includes(permission)) {console.log(`Permission denied. Missing permission: ${permission}`);return;}return originalMethod.apply(this, args);};};
}class FileService {@Log@PermissionRequired("READ")readFile(filePath: string) {console.log(`Reading file from ${filePath}`);}
}const fileService = new FileService();
fileService.readFile("/path/to/file");
解释:此时,readFile 方法同时拥有日志记录和权限校验的功能,先打印调用日志,再检查权限。
总结
TypeScript 装饰器是一种强大的工具,可以在类、方法、属性、参数等地方进行功能扩展,常用于日志记录、权限校验、性能监控等场景。在实际开发中,装饰器的应用通常能大大减少冗余代码、提高代码的可维护性和灵活性。通过装饰器,开发者可以以声明式的方式对类和方法进行增强,并实现高层次的抽象和代码重用。
常见应用场景:
- 日志记录
- 性能监控
- 权限校验
- 依赖注入
- 数据验证
- 缓存机制
理解装饰器及其应用方式,可以让你在开发中更加得心应手,特别是当代码规模增大时,装饰器能够帮助你以更简洁的方式处理复杂的逻辑。
相关文章:
TypeScript 装饰器都有那些应用场景?如何更快的上手?
TypeScript 装饰器简介 在 TypeScript 中,装饰器(Decorators)是一种特殊的语法,用于在类、类方法、属性、访问器等上动态地添加行为或修改现有行为。装饰器可以用来增强类的功能、修改方法的行为,或者修改类的元数据等…...
堆优化版本的Prim
prim和dijkstra每轮找最小边的松弛操作其实是同源的,因而受dijkstra堆优化的启发,那么prim也可以采用小根堆进行优化。时间复杂度也由 O ( n 2 ) O(n^2) O(n2)降为 O ( n l o g n ) O(nlogn) O(nlogn)。 测试一下吧:原题链接 #include <i…...
Ubuntu上安装MySQL并且实现远程登录
目录 下载网络工具 查看网络连接 更新系统软件包; 安装mysql数据库 查看mysql数据库状态 以数字ip形式显示mysql的监听状态。(默认监听端口是3306) 查看安装mysql数据库时系统创建的目录信息。 根据查询到的系统用户名以及随机密码&a…...
蓝桥杯每日真题 - 第21天
题目:(空间) 题目描述(12届 C&C B组A题) 解题思路: 转换单位: 内存总大小为 256MB,换算为字节: 25610241024268,435,456字节 计算每个整数占用空间: 每个 32 位整数占用…...
(长期更新)《零基础入门 ArcGIS(ArcMap) 》实验一(下)----空间数据的编辑与处理(超超超详细!!!)
续上篇博客(长期更新)《零基础入门 ArcGIS(ArcMap) 》实验一(上)----空间数据的编辑与处理(超超超详细!!!)-CSDN博客 继续更新 目录 什么是拓扑? 1.3.5道路…...
NLP论文速读(CVPR 2024)|使用DPO进行diffusion模型对齐
论文速读|Diffusion Model Alignment Using Direct Preference Optimization 论文信息: 简介: 本文探讨的背景是大型语言模型(LLMs)通过人类比较数据和从人类反馈中学习(RLHF)的方法进行微调,以…...
操作系统——揭开盖子
计算机执行时——取指执行 es:bx等于从0x9000开始,到0x90200结束...
如何在 React 项目中应用 TypeScript?应该注意那些点?结合实际项目示例及代码进行讲解!
在 React 项目中应用 TypeScript 是提升开发效率、增强代码可维护性和可读性的好方法。TypeScript 提供了静态类型检查、自动补全和代码提示等功能,这对于 React 开发者来说,能够帮助早期发现潜在的 bug,提高开发体验。 1. 项目初始化 在现…...
C++学习第四天
创作过程中难免有不足,若您发现本文内容有误,恳请不吝赐教。 提示:以下是本篇文章正文内容,下面案例可供参考 一、计算类对象的大小 #include<iostream> using namespace std;class Date { public:void Init(int year, in…...
【从零开始的LeetCode-算法】3232. 判断是否可以赢得数字游戏
给你一个 正整数 数组 nums。 Alice 和 Bob 正在玩游戏。在游戏中,Alice 可以从 nums 中选择所有个位数 或 所有两位数,剩余的数字归 Bob 所有。如果 Alice 所选数字之和 严格大于 Bob 的数字之和,则 Alice 获胜。 如果 Alice 能赢得这场游…...
一种简单高效的RTSP流在线检测方法,不需要再过渡拉流就可以获取设备状态以及对应音视频通道与编码格式
平台如何检测一路RTSP流是否在线? 在之前的流媒体平台方案中,我们都是通过定时RTSP拉流的方式,走一个完整的RTSP流程:包括OPTIONS、DESCRIBE、SETUP、PLAY、RTP收流,这种方式去取流,然后取到流之后进行流解…...
24/11/22 项目拆解 艺术风格转移
我们有时候想把两种艺术风格整合,创造更具艺术特色的艺术品,人很难办到,但是人工智能可以,比如下面将艺术画的风格转移到照片上。 我们先来初步了解一下实现上述功能的数学原理 所谓艺术风格,其实就是边缘,颜色&#…...
数字赋能,气象引领 | 气象景观数字化服务平台重塑京城旅游生态
在数字化转型的浪潮中,旅游行业正以前所未有的速度重塑自身,人民群众对于高品质、个性化旅游服务需求的日益增长,迎着新时代的挑战与机遇,为开展北京地区特色气象景观预报,打造“生态气象旅游”新业态,助推…...
关于Redux的学习(包括Redux-toolkit中间件)
目录 什么是 Redux ? 我为什么要用 Redux ? 我什么时候应该用 Redux ? Redux 库和工具 React-Redux Redux Toolkit Redux DevTools 拓展 一个redux小示例 代码示例(很有用): Redux 术语 Actions Reducers Store Dis…...
【无人机】
GJI Mini 4 Pro学习 首次飞行使用 01 开箱 打开长飞套装 依次取出产品及配件 飞行器、DJI RC - N2(DJI RC 2)、桨叶/螺丝、云台保护罩、束桨器、电池、螺丝刀、USB-C快接线、单肩包、USB-C数据线、充电管家 02 准备飞行器 取下束桨器,…...
Zabbix7.0.6的容器镜像准备
准备Zabbix7.0.6部署所需的容器镜像。 更新时间:20241122 一、准备数据库镜像 1、核对版本支持 根据Zabbix官网文档requirements 可知,当前最新的Zabbix 7.0.6对PostgreSQL数据库的要求如下: support for PostgreSQL versions:- 17.X …...
利用 GitHub 和 Hexo 搭建个人博客【保姆教程】
利用 GitHub 和 Hexo 搭建个人博客 利用 GitHub 和 Hexo 搭建个人博客一、前言二、准备工作(一)安装 Node.js 和 Git(二)注册 GitHub 账号 三、安装 Hexo(一)创建博客目录(二)安装 H…...
React第四节 组件的三大属性之state
前言 状态 state适用于类式组件中,而再函数式组件中需要使用 useState HOOK 模拟状态; React的组件就是一个状态机,通过与用户的交互,实现不同的状态,根据不同的状态展现出不一样的UI视图 并不是组件中所有的属性 都是组件的状态…...
MongoDB进阶篇-索引(索引概述、索引的类型、索引相关操作、索引的使用)
文章目录 1. 索引概述2. 索引的类型2.1 单字段索引2.2 复合索引2.3 其他索引2.3.1 地理空间索引(Geospatial Index)2.3.2 文本索引(Text Indexes)2.3.3 哈希索引(Hashed Indexes) 3. 索引相关操作3.1 查看索…...
使用FFmpeg实现视频与GIF的画中画效果
用FFmpeg命令行工具将GIF动画作为画中画(Picture-in-Picture,简称PiP)叠加到视频上。FFmpeg是一个强大的多媒体框架,能够处理几乎所有格式的音频和视频文件。通过这个教程,你将学会如何将一个小的GIF动画循环播放&…...
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
Linux --进程控制
本文从以下五个方面来初步认识进程控制: 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程,创建出来的进程就是子进程,原来的进程为父进程。…...
大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型(LLM)参数规模的增长,推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长,而KV缓存的内存消耗可能高达数十GB(例如Llama2-7B处理100K token时需50GB内存&a…...
【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中(图1): mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案
在大数据时代,海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构,在处理大规模数据抓取任务时展现出强大的能力。然而,随着业务规模的不断扩大和数据抓取需求的日益复杂,传统…...
GraphQL 实战篇:Apollo Client 配置与缓存
GraphQL 实战篇:Apollo Client 配置与缓存 上一篇:GraphQL 入门篇:基础查询语法 依旧和上一篇的笔记一样,主实操,没啥过多的细节讲解,代码具体在: https://github.com/GoldenaArcher/graphql…...
算法打卡第18天
从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder ,其中 inorder 是二叉树的中序遍历, postorder 是同一棵树的后序遍历,请你构造并返回这颗 二叉树 。 示例 1: 输入:inorder [9,3,15,20,7…...
