100天精通鸿蒙从入门到跳槽——第11天：TypeScript 知识储备：装饰器

在这里插入图片描述

博主猫头虎的技术世界

🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能！

专栏链接：

🔗 精选专栏：

《面试题大全》 — 面试准备的宝典！
《IDEA开发秘籍》 — 提升你的IDEA技能！
《100天精通Golang》 — Go语言学习之旅！
《100天精通鸿蒙》 — 从Web/安卓到鸿蒙大师！

100天精通鸿蒙OS（基础篇）

🚀 100天精通鸿蒙从入门到跳槽——第11天：TypeScript 知识储备：装饰器
- 📝 摘要
- 🌟 一、引言
- 📘 二、正文
- - ✨ 装饰器的基本语法
  - 🌈 常见的装饰器类型
  - 🛠️ 自定义装饰器
- 📊 三、总结
- 📚 四、参考资料

🚀 100天精通鸿蒙从入门到跳槽——第11天：TypeScript 知识储备：装饰器

在这里插入图片描述

📝 摘要

本文将深入探讨TypeScript中的装饰器（Decorators）概念和实践应用。装饰器是一种独特的语法，主要用于扩展类、方法、属性等的行为和元数据。本文将深入讲解装饰器的语法结构、常见的装饰器类型，并指导如何根据需要自定义装饰器。

🌟 一、引言

TypeScript作为JavaScript的强类型超集，不仅提供了优秀的类型检查机制，还引入了多种高级特性，其中包括装饰器。装饰器能够优雅地修改和增强类、方法和属性的功能，而且在Angular、Express等流行框架中得到了广泛应用。本文旨在帮助你全面掌握TypeScript装饰器的精髓，让你在项目开发中游刃有余。

📘 二、正文

✨ 装饰器的基本语法

在TypeScript中，装饰器通过@符号标识，紧跟在被修饰的声明之前。

装饰器本质上是函数或表达式，其返回值为一个函数。

装饰器函数通常接收以下三个参数：

目标对象
成员名称
成员属性描述符

例如，下面是一个装饰器的简单示例：

function log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {console.log(`Calling ${propertyKey} method`);
}class MyClass {@logmyMethod() {console.log('Hello, World!');}
}const obj = new MyClass();
obj.myMethod(); // 输出：Calling myMethod method

这个示例中的log装饰器在目标方法被调用时打印日志，通过在myMethod方法前加上@log，成功实现了行为的修改。

🌈 常见的装饰器类型

TypeScript提供了多种装饰器类型，主要包括类装饰器、方法装饰器、属性装饰器和参数装饰器。

类装饰器：用于修改或增强类的功能。它接收类的构造函数作为参数。
方法装饰器：用于修改类的方法。它接收目标对象、方法名称和属性描述符。
属性装饰器：用于修改类的属性。它接收目标对象和属性名称。
参数装饰器：用于修改方法或构造函数的参数。它接收目标对象、方法名称和参数索引。

以下是这些装饰器的示例代码：

首先，我们定义一个类装饰器WithCheetah，这个装饰器将添加一个特定的属性到类中。接着，我们定义一个方法装饰器LogMethod，用于记录方法的调用。然后，我们创建一个属性装饰器ReadOnly，使属性变为只读。最后，我们定义一个参数装饰器Validate，用于校验方法参数。

// 类装饰器
function WithCheetah(constructor: Function) {constructor.prototype.cheetah = "猫头虎@阿珊和她的猫";
}// 方法装饰器
function LogMethod(target: any, propertyName: string, descriptor: PropertyDescriptor) {const method = descriptor.value;descriptor.value = function (...args: any[]) {console.log(`调用方法: ${propertyName}`);return method.apply(this, args);};
}// 属性装饰器
function ReadOnly(target: any, propertyName: string) {Object.defineProperty(target, propertyName, {writable: false});
}// 参数装饰器
function Validate(target: any, propertyName: string, index: number) {console.log(`校验参数: 方法 ${propertyName} 的第 ${index + 1} 个参数`);
}@WithCheetah
class MyClass {@ReadOnlycheetah: string;@LogMethodsayHello(@Validate name: string) {console.log(`Hello, ${name}!`);}
}const myClassInstance = new MyClass();
console.log(myClassInstance.cheetah); // 输出: 猫头虎@阿珊和她的猫
myClassInstance.sayHello("世界");      // 输出: 调用方法: sayHello 和 Hello, 世界!// 尝试修改只读属性将导致错误
// myClassInstance.cheetah = "新值";   // 这会导致运行时错误

在这个例子中：

WithCheetah类装饰器给类添加了一个新的属性cheetah。
LogMethod方法装饰器在调用sayHello方法时记录日志。
ReadOnly属性装饰器使得cheetah属性成为只读。
Validate参数装饰器在sayHello方法的参数被调用时执行校验。

这个示例我们演示了如何在TypeScript中使用不同类型的装饰器来增强和修改类的行为。

🛠️ 自定义装饰器

除了使用内置装饰器，我们还可以根据具体需求自定义装饰器。

自定义装饰器通常是一个函数，用于接收装饰目标的参数，并返回一个函数。这样，我们可以实现更为复杂的装饰

逻辑，例如权限验证、性能监控等。

function log(message: string) {return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {console.log(`[${message}] Calling ${propertyKey} method`);};
}class MyClass {@log('Debug')myMethod() {console.log('Hello, World!');}
}const obj = new MyClass();
obj.myMethod(); // 输出：[Debug] Calling myMethod method