TypeScript 中的装饰器

TypeScript 中的装饰器是一项强大的功能，允许您添加元数据或修改类、方法、属性或参数的行为。它们通常用在 Angular 等框架中来丰富组件和服务。无论您是初学者还是经验丰富的开发人员，本文都会指导您逐步创建自己的装饰器来增强您的 TypeScript 应用程序。

先决条件

开始之前，请确保您具备以下条件：

• 对 TypeScript 的基本了解。
• 使用 tsconfig.json 文件中启用的 ExperimentalDecorators 选项配置的 TypeScript：

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

什么是装饰器？

装饰器是应用于类、方法、属性或参数的函数。在符号@前面，装饰器可以修改或丰富它所附加的元素。其主要用途包括：

• 添加元数据：用于提供有关类或属性的附加信息。
• 修改行为：允许您动态更改方法或类的操作。
• 注入依赖项：在模块化架构中实用。

创建组件装饰器

第 1 步：定义装饰器

我们将创建一个装饰器，将 componentName 属性添加到类中。

function Component(name: string) {
    return function (constructor: Function) {
        constructor.prototype.componentName = name;
    };
}

说明：

该装饰器接收名称字符串并将其添加为类原型上的属性。此类的所有实例都可以访问此属性。

第2步：应用装饰器

让我们将装饰器应用到一个类中。

@Component('MonComposant')
class MonComposant {
    constructor() {
        console.log(`Le nom du composant est : ${this.componentName}`);
    }
}

第三步：测试装饰器

让我们创建该类的一个实例来检查它是如何工作的。

const composant = new MonComposant(); 
// Affiche : Le nom du composant est : MonComposant

创建输入装饰器

第 1 步：定义输入装饰器

此装饰器监视并记录属性的更改。

function Input() {
    return function (target: any, propertyKey: string) {
        let value: any;

        const getter = () => {
            return value;
        };

        const setter = (newValue: any) => {
            console.log(`La valeur de ${propertyKey} a été mise à jour : ${newValue}`);
            value = newValue;
        };

        Object.defineProperty(target, propertyKey, {
            get: getter,
            set: setter,
            enumerable: true,
            configurable: true,
        });
    };
}

说明：

装饰器使用 Object.defineProperty 来拦截对属性的更改。这允许您添加自定义逻辑，例如更改日志记录。

第 2 步：应用输入装饰器

让我们将其应用到属性上。

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

第 3 步：测试输入装饰器

更改属性观察效果。

function Component(name: string) {
    return function (constructor: Function) {
        constructor.prototype.componentName = name;
    };
}

结论

TypeScript 装饰器提供了一种优雅而强大的方式来向类和属性添加功能和元数据。通过阅读本文，您已经学会了：

1. 创建组件装饰器来丰富类。
2. 实现输入装饰器来监视属性更改。

这些简单的示例展示了装饰器如何提高代码的可读性和可维护性。探索更多官方 TypeScript 文档以发现更高级的应用程序，例如通过 Reflect.metadata 使用反射元数据。

以上是TypeScript 中的装饰器的详细内容。更多信息请关注PHP中文网其他相关文章！