裝飾器（Decorator）可聲明在類及其成員（例如屬性、方法等）之上，為它們提供一種標注，用于分離復雜邏輯或附加額外邏輯，其語法形式為@expression。expression是一個會在運行時被調用的函數，它的參數是被裝飾的聲明信息。假設有一個@sealed裝飾器，那么可以像下面這樣定義sealed()函數。 ~~~ function sealed(target) { //... } ~~~   有兩種方式可以開啟裝飾器，第一種是在輸入命令時添加--experimentalDecorators參數，如下所示，其中--target參數不能省略，它的值為“ES5”。 ~~~ tsc default.ts --target ES5 --experimentalDecorators ~~~   第二種是在tsconfig.json配置文件中添加experimentalDecorators屬性，如下所示，對應的target屬性也不能省略。 ~~~ { compilerOptions: { target: "ES5", experimentalDecorators: true } } ~~~ ## 一、類裝飾器   類裝飾器用于監聽、修改或替換類的構造函數，并將其作為類裝飾器唯一可接收的參數。當裝飾器返回undefined時，延用原來的構造函數；而當裝飾器有返回值時，會用它來覆蓋原來的構造函數。下面的示例會通過類裝飾器封閉類的構造函數和原型，其中@sealed聲明在類之前。 ~~~ @sealed class Person { name: string; constructor(name: string) { this.name = name; } } function sealed(constructor: Function) { Object.seal(constructor); Object.seal(constructor.prototype); } ~~~   在經過TypeScript編譯后，將會生成一個\_\_decorated()函數，并應用到Person類上，如下所示。 ~~~ var Person = /** @class */ (function() { function Person(name) { this.name = name; } Person = __decorate([sealed], Person); return Person; })(); ~~~   注意，類裝飾器不能出現在.d.ts聲明文件和外部類之中。 ## 二、方法裝飾器   方法裝飾器聲明在類的方法之前，作用于方法的屬性描述符，比類裝飾器還多一個重載限制。它能接收三個參數，如下所列：   （1）對于靜態成員來說是類的構造函數，而對于實例成員則是類的原型對象。   （2）成員的名字，一個字符串或符號。   （3）成員的屬性描述符，當輸出版本低于ES5時，該值將會是undefined。   當方法裝飾器返回一個值時，會覆蓋當前方法的屬性描述符。下面是一個簡單的例子，方法裝飾器的第一個參數是Person.prototype，第二個是“cover”，調用getName()方法得到的將是“freedom”，而不是原先的“strick”。 ~~~ class Person { @cover getName(name) { return name; } } function cover(target: any, key: string, descriptor: PropertyDescriptor) { descriptor.value = function() { return "freedom"; }; return descriptor; } let person = new Person(); person.getName("strick"); //"freedom" ~~~ ## 三、訪問器裝飾器   訪問器裝飾器聲明在類的訪問器屬性之前，作用于相應的屬性描述符，其限制與類裝飾器相同，而接收的三個參數與方法裝飾器相同。并且還需要注意一點，TypeScript不允許同時裝飾一個成員的get和set訪問器，只能應用在第一個訪問器上。   以下面的Person類為例，定義了一個訪問器屬性name，當訪問它時，得到的將是“freedom”，而不是原先的“strick”。 ~~~ class Person { private _name: string; @access get name() { return this._name; } set name(name) { this._name = name; } } function access(target: any, key: string, descriptor: PropertyDescriptor) { descriptor.get = function() { return "freedom"; }; return descriptor; } let person = new Person(); person.name = "strick"; console.log(person.name); //"freedom" ~~~ ## 四、屬性裝飾器   屬性裝飾器聲明在屬性之前，其限制與訪問器裝飾器相同，但只能接收兩個參數，不存在第三個屬性描述符參數，并且沒有返回值。仍然以下面的Person類為例，定義一個name屬性，并且在@property裝飾器中修改其值。 ~~~ class Person { @property name: string; } function property(target: any, key: string) { Object.defineProperty(target, key, { value: "freedom" }); } let person = new Person(); person.name = "strick"; console.log(person.name); //"freedom" ~~~ ## 五、參數裝飾器   參數裝飾器聲明在參數之前，它沒有返回值，其限制與方法裝飾器相同，并且也能接收三個參數，但第三個參數表示裝飾的參數在函數的參數列表中所處的位置（即索引）。下面用一個例子來演示參數裝飾器的用法，需要與方法裝飾器配合。 ~~~ let params = []; class Person { @func getName(@required name) { return name; } } ~~~   在@func中調用getName()方法，并向其傳入params數組中的值，@required用于修改指定位置的參數的值，如下所示。 ~~~ function func(target: any, key: string, descriptor: PropertyDescriptor) { const method = descriptor.value; descriptor.value = function () { return method.apply(this, params); }; return descriptor; } function required(target: any, key: string, index: number) { params[index] = "freedom"; } ~~~   當實例化Person類，調用getName()方法，得到的將是“freedom”。 ~~~ let person = new Person(); person.getName("strick"); //"freedom" ~~~ ## 六、裝飾器工廠   裝飾器工廠是一個能接收任意個參數的函數，用來包裹裝飾器，使其更易使用，它能返回上述任意一種裝飾器函數。接下來改造方法裝飾器一節中的cover()函數，接收一個字符串類型的value參數，返回一個方法裝飾器函數，如下所示。 ~~~ function cover(value: string) { return function(target: any, key: string, descriptor: PropertyDescriptor) { descriptor.value = function() { return value; }; return descriptor; }; } ~~~   在將@cover作用于類中的方法時，需要傳入一個字符串，如下所示。 ~~~ class Person { @cover("freedom") getName(name) { return name; } } ~~~ ## 七、裝飾器組合   將多個裝飾器應用到同一個聲明上時，既可以寫成一行，也可以寫成多行，如下所示。 ~~~ /****** 一行 ******/ @first @second desc /****** 多行 ******/ @first @second desc ~~~   這些裝飾器的求值方式與復合函數類似，先由上至下依次執行裝飾器，再將求值結果作為函數，由下至上依次調用。例如定義兩個裝飾器工廠函數，如下代碼所示，在函數體和返回的裝飾器中都會打印一個數字。 ~~~ function first() { console.log(1); return function(target: any, key: string, descriptor: PropertyDescriptor) { console.log(2); }; } function second() { console.log(3); return function(target: any, key: string, descriptor: PropertyDescriptor) { console.log(4); }; } ~~~   將它們先后聲明到類中的同一個方法，如下代碼所示。根據求值順序可知，先打印出1和3，再打印出4和2。 ~~~ class Person { @first() @second() getName(name) { return name; } } ~~~ ***** > 原文出處： [博客園-TypeScript躬行記](https://www.cnblogs.com/strick/category/1561745.html) [知乎專欄-TypeScript躬行記](https://zhuanlan.zhihu.com/pwts2019) 已建立一個微信前端交流群，如要進群，請先加微信號freedom20180706或掃描下面的二維碼，請求中需注明“看云加群”，在通過請求后就會把你拉進來。還搜集整理了一套[面試資料](https://github.com/pwstrick/daily)，歡迎瀏覽。  推薦一款前端監控腳本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不僅能監控前端的錯誤、通信、打印等行為，還能計算各類性能參數，包括 FMP、LCP、FP 等。