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中文網其他相關文章！