TypeScript Decorators

隨著 TypeScript 和 ES6 中 Classes 的引入，現在存在一些需要額外功能來支持注釋或修改類和類成員的場景。 裝飾器提供了一種為類聲明和成員添加注釋和元編程語法的方法。裝飾器是 JavaScript 的第 2 階段提案，可作為 TypeScript 的實驗性功能使用。

要啟用對裝飾器的實驗性支持，您必須在命令行或 tsconfig.json 中啟用 ExperimentDecorators 編譯器選項：

tsc --target ES5 --experimentalDecorators

tsconfig.json:

{"compilerOptions": {"target": "ES5","experimentalDecorators": true} }

裝飾器是一種特殊的聲明，可以附加到類聲明、方法、訪問器、屬性或參數。裝飾器使用@expression 形式，其中表達式必須計算為一個函數，該函數將在運行時調用，并帶有有關裝飾聲明的信息。

例如，給定裝飾器@sealed，我們可以編寫如下的sealed 函數：

function sealed(target) {// do something with 'target' ... }

Decorator Factories

如果我們想自定義如何將裝飾器應用于聲明，我們可以編寫一個裝飾器工廠。裝飾器工廠只是一個返回表達式的函數，該表達式將在運行時被裝飾器調用。

我們可以用以下方式編寫一個裝飾工廠：

function color(value: string) {// this is the decorator factory, it sets up// the returned decorator functionreturn function (target) {// this is the decorator// do something with 'target' and 'value'...}; }

當多個裝飾器應用于單個聲明時，它們的評估類似于數學中的函數組合。 在這個模型中，當組合函數 f 和 g 時，得到的復合 (f ° g)(x) 等價于 f(g(x))。

因此，在 TypeScript 中對單個聲明評估多個裝飾器時，將執行以下步驟：

• 每個裝飾器的表達式都是從上到下計算的。
• 然后將結果作為函數從下到上調用。

一個例子：

function first() {console.log("first(): factory evaluated");return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {console.log("first(): called");}; }function second() {console.log("second(): factory evaluated");return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {console.log("second(): called");}; }class ExampleClass {@first()@second()method() {} }

更多Jerry的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的TypeScript Decorators 的使用说明的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。