TypeScript 中的装饰器-js教程-PHP中文网

TypeScript 中的装饰器

花韻仙語

发布： 2024-12-03 20:42:02

转载

791人浏览过

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 步：应用输入装饰器

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

class moncomposant {
    @input()
    public nom: string;

    constructor(nom: string) {
        this.nom = nom;
    }
}

登录后复制

第 3 步：测试输入装饰器

更改属性观察效果。

const composant = new MonComposant('Composant Initial');
composant.nom = 'Nouveau Composant'; 
// Affiche : La valeur de nom a été mise à jour : Nouveau Composant

登录后复制