装饰器简介

TypeScript 中的装饰器是特殊函数，可用于添加元数据，或修改类、方法和属性的行为。

它们通常用于 Angular 等框架，以简化开发工作。

装饰器的工作原理

装饰器是应用于类或其成员（方法、属性等）的函数。

例如，Angular 中的 @Component 是一种装饰器，它会向类添加元数据，将其定义为组件。

使用内置装饰器

TypeScript 提供了以下内置装饰器：

• @readonly：使属性成为只读属性。
• @enumerable：控制属性是否可枚举。

这些装饰器可以直接修改属性或方法的行为。

创建简单装饰器

您可以创建自己的装饰器来记录日志消息或添加功能：

将其应用于属性：@Log。

function Log(target: any, propertyName: string) {
  console.log(`Property ${propertyName} was accessed`);
}

类装饰器

类装饰器用于修改或增强整个类的行为：

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

将其应用于类：@SimpleDecorator。

function SimpleDecorator(constructor: Function) {
  console.log(`${constructor.name} is decorated`);
}

方法装饰器

方法装饰器用于修改类方法的行为：

在方法上使用：@LogMethod。

function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log(`Method ${propertyKey} was called`);
}

在 Angular 中使用装饰器

Angular 大量依赖装饰器来向其组件添加元数据：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

@Component 装饰器将该类定义为 Angular 组件。

使用装饰器的最佳实践

使用装饰器时：

• 保持装饰器简单且专注。
• 将其用于元数据，而不是复杂逻辑。
• 尽可能利用内置装饰器，以节省时间。

恭喜您！

您已经了解了装饰器在 TypeScript 中的工作方式，以及如何使用它们来修改或增强代码。请继续尝试使用装饰器，掌握它们在项目中的应用！