TypeScript Decorators

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

要啟用對裝飾器的實(shí)驗(yàn)性支持，您必須在命令行或 tsconfig.json 中啟用 ExperimentDecorators 編譯器選項(xiàng)：

tsc --target ES5 --experimentalDecorators

tsconfig.json:

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

裝飾器是一種特殊的聲明，可以附加到類聲明、方法、訪問器、屬性或參數(shù)。裝飾器使用@expression 形式，其中表達(dá)式必須計(jì)算為一個(gè)函數(shù)，該函數(shù)將在運(yùn)行時(shí)調(diào)用，并帶有有關(guān)裝飾聲明的信息。

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

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

Decorator Factories

如果我們想自定義如何將裝飾器應(yīng)用于聲明，我們可以編寫一個(gè)裝飾器工廠。裝飾器工廠只是一個(gè)返回表達(dá)式的函數(shù)，該表達(dá)式將在運(yùn)行時(shí)被裝飾器調(diào)用。

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

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'...}; }

當(dāng)多個(gè)裝飾器應(yīng)用于單個(gè)聲明時(shí)，它們的評估類似于數(shù)學(xué)中的函數(shù)組合。 在這個(gè)模型中，當(dāng)組合函數(shù) f 和 g 時(shí)，得到的復(fù)合 (f ° g)(x) 等價(jià)于 f(g(x))。

因此，在 TypeScript 中對單個(gè)聲明評估多個(gè)裝飾器時(shí)，將執(zhí)行以下步驟：

• 每個(gè)裝飾器的表達(dá)式都是從上到下計(jì)算的。
• 然后將結(jié)果作為函數(shù)從下到上調(diào)用。

一個(gè)例子：

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的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。