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

---

博主猫头虎的技术世界

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

专栏链接：

🔗 精选专栏：

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

🚀 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 {
  @log
  myMethod() {
    console.log('Hello, World!');
  }
}

const obj = new MyClass();
obj.myMethod(); // 输出：Calling myMethod method

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

🌈 常见的装饰器类型

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

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

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

首先，我们定义一个类装饰器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 {
  @ReadOnly
  cheetah: string;

  @LogMethod
  sayHello(@Validate name: string) {
    console.log(`Hello, ${name}!`);
  }
}

const myClassInstance = new MyClass();
console.log(myClassInstance.cheetah); // 输出: 猫头虎@阿珊和她的猫
myClassInstance.sayHello("世界");      // 输出: 调用方法: sayHello 和 Hello, 世界!

// 尝试修改只读属性将导致错误
// myClassInstance.cheetah = "新值";   // 这会导致运行时错误

在这个例子中：

1. WithCheetah类装饰器给类添加了一个新的属性cheetah。
2. LogMethod方法装饰器在调用sayHello方法时记录日志。
3. ReadOnly属性装饰器使得cheetah属性成为只读。
4. 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

📊 三、总结

本文详细介绍了TypeScript中装饰器的核心概念、语法及应用。装饰器作为一种特殊的语法结构，能够在不改变原有代码结构的前提下，增强类及其成员的功能，提升代码的可维护性和扩展性。

📚 四、参考资料

• TypeScript Handbook: Decorators
• Decorators in TypeScript

---

希望这篇博客能够帮助你更好地理解并应用TypeScript中的装饰器，为你的鸿蒙开发之旅添砖加瓦！🚀🚀🚀

👉 更多信息：对《100天精通鸿蒙》专栏感兴趣吗？别忘了点击文末名片或者下方链接加入我们的学习群。我是猫头虎博主，期待与您的交流！ 🦉💬
领域矩阵：

🌐 猫头虎技术领域矩阵：
深入探索各技术领域，发现知识的交汇点。了解更多，请访问：

• 猫头虎技术矩阵
• 新矩阵备用链接

🚀 技术栈推荐：
JS, TS，ArkTS 等前端技术

💡 联系与版权声明：

📩 联系方式：

• 微信: Libin9iOak
• 公众号: 猫头虎技术团队

?? 版权声明：
本文为原创文章，版权归作者所有。未经许可，禁止转载。更多内容请联系作者猫头虎@阿珊和她的猫
。

点击下方名片，加入猫头虎技术社群矩阵。与我们一起在《100天精通鸿蒙》的旅程中，探索HarmonyOS的奥秘，共同成长。

---