TypeScript 中的装饰器

PHP中文网 • 2025年3月7日 07:50:29 • 编程技术 • 阅读 2

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

登录后复制