دکوراتورها در TypeScript – انجمن DEV

Summarize this content to 400 words in Persian Lang
Decorators در TypeScript یک ویژگی قدرتمند است که به شما امکان می دهد متادیتا اضافه کنید یا رفتار کلاس ها، روش ها، ویژگی ها یا پارامترها را تغییر دهید. آنها اغلب در چارچوب هایی مانند Angular برای غنی سازی کامپوننت ها و خدمات استفاده می شوند. چه یک مبتدی یا یک توسعه دهنده با تجربه باشید، این مقاله شما را گام به گام از طریق ایجاد دکوراتورهای خود برای بهبود برنامه های TypeScript خود راهنمایی می کند.

پیش نیازها

قبل از شروع، مطمئن شوید که موارد زیر را دارید:

درک اولیه از TypeScript.
TypeScript با گزینه پیکربندی شده است experimentalDecorators در فایل شما فعال شده است tsconfig.json :

{
“compilerOptions”: {
“experimentalDecorators”: true
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

دکوراتور چیست؟

دکوراتور تابعی است که برای یک کلاس، متد، ویژگی یا پارامتر اعمال می شود. قبل از نماد @، یک دکوراتور می تواند عنصری را که به آن متصل است اصلاح یا غنی کند. کاربردهای اصلی آن عبارتند از:

متادیتا اضافه کنید : برای ارائه اطلاعات اضافی در مورد یک کلاس یا ملک مفید است.

تغییر رفتار : به شما اجازه می دهد تا به صورت پویا عملکرد یک متد یا کلاس را تغییر دهید.

وابستگی ها را تزریق کنید : کاربردی در معماری های مدولار.

ایجاد یک دکوراتور کامپوننت

مرحله 1: دکوراتور را تعریف کنید

ما یک دکوراتور ایجاد خواهیم کرد که یک خاصیت را اضافه می کند componentName به یک کلاس

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

توضیح :این دکوراتور یک رشته دریافت می کند name و آن را به عنوان یک ویژگی روی نمونه اولیه کلاس اضافه می کند. تمام نمونه های این کلاس به این ویژگی دسترسی خواهند داشت.

مرحله 2: دکوراتور را اعمال کنید

بیایید دکوراتور را در یک کلاس اعمال کنیم.

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 3: دکوراتور را تست کنید

بیایید یک نمونه از کلاس ایجاد کنیم تا نحوه عملکرد آن را بررسی کنیم.

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

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه گیری

دکوراتورهای TypeScript روشی زیبا و قدرتمند برای افزودن عملکرد و ابرداده به کلاس‌ها و ویژگی‌های شما ارائه می‌کنند. با دنبال کردن این مقاله، یاد گرفتید که:

یک دکوراتور مولفه ایجاد کنید تا کلاس را غنی کنید.
یک دکوراتور ورودی برای نظارت بر تغییرات ملک پیاده سازی کنید.

این مثال‌های ساده نشان می‌دهند که چگونه دکوراتورها می‌توانند خوانایی و قابلیت نگهداری کد شما را بهبود بخشند. اسناد رسمی TypeScript را بیشتر کاوش کنید تا برنامه های پیشرفته تری را بیاموزید، مانند استفاده از ابرداده منعکس شده با Reflect.metadata.

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

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

@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

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,
        });
    };
}

class MonComposant {
    @Input()
    public nom: string;

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

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