TS裝飾器

  1. 裝飾器是一種特殊類型的聲明，本質(zhì)上就是一個方法，可以注入到類、方法、屬性、參數(shù)上，擴展其功能；
  2. 常見的裝飾器：類裝飾器、屬性裝飾器、方法裝飾器、參數(shù)裝飾器...
  3. 裝飾器在寫法上有：普通裝飾器(無法傳參)、裝飾器工廠(可傳參)
  4. 裝飾器已是ES7的標準特性之一，是過去幾年JS最大的成就之一！
  5. 啟用裝飾器： 
    "compilerOptions": {
    "experimentalDecorators": true
}

類裝飾器

  1. 類裝飾器在類聲明之前被聲明，應(yīng)用于類構(gòu)造函數(shù)，可以監(jiān)視、修改、替換類的定義，傳入一個參數(shù)； 
    function logClz(params:any) {
    console.log(params)  // class HttpClient
}
@logClz
class HttpClient {
    constructor() {

    }
}
    1. logClz() 接收的參數(shù)params就是被裝飾的類HttpClient
    2. 為HttpClient動態(tài)擴展屬性屬性和方法
    function logClz(params:any) {
    params.prototype.url = 'xxxx';
    params.prototype.run = function() {
        console.log('run...');
    };
}
var http:any = new HttpClient();
http.run(); // run...
  2. 裝飾器工廠：閉包，返回的函數(shù)才是真正的裝飾器。 
    function logClz(params:string) {
    console.log('params:', params);  //params: hello
    return function(target:any) {
        console.log('target:', target);  //target: class HttpClient
        target.prototype.url = params;  //擴展一個url屬性
    }
}
@logClz('hello')
class HttpClient {
    constructor() { }
}
var http:any = new HttpClient();
console.log(http.url);  //hello
    1. 在使用裝飾器工廠時，如果不想給裝飾器傳參，可以把參數(shù)聲明為可選參數(shù)，但使用裝飾器時仍然不能丟失小括號！
    function logClz(params?:string) {
    return function(target:any) { }
}
@logClz()
class HttpClient {
    constructor() { }
}
  3. 重載構(gòu)造函數(shù)
    1. 類裝飾器表達式會在運行時當作函數(shù)被調(diào)用，類的構(gòu)造函數(shù)作為其唯一的參數(shù)；
    2. 如果類裝飾器返回一個值，它會使用提供的構(gòu)造函數(shù)來替換類的聲明；
    function logClz(target:any) {
    return class extends target {
        url = 'change url'
        getData() {
            console.log('getData:', this.url);
        }
    }
}
@logClz
class HttpClient {
    public url:string|undefined;
    constructor() {
        this.url = 'init url'
    }
    getData() {
        console.log(this.url);
    }
}
var http = new HttpClient();  //裝飾器返回的就是HttpClient的子類，因此TS可以自動推導(dǎo) http 的類型
http.getData(); //getData: change url
  4. 修改類的定義 
    function fn<T extends {new(...args: any[]): {}}>(constructor: T): T {
    class Ps extends constructor {
        age: number = 20;   //擴展一個類型為number的屬性age
    }
    return Ps;
}
@fn
class Person{
    
}
let p:any = new Person(); //裝飾之后的Person已經(jīng)變成了Ps
console.log(p.age)  //20

    function fn(v: number) {
    return function<T extends {new(...args: any[]): {}}>(cst: T): T {
        class Ps extends cst {
            age: number = v;
        }
    }
}
@fn(10)
class Person { }  //age:number = 10
@fn(20)
class Cat { }  //age:number = 20
    T extends {new(...args: any[]): {}}：{new(...args: any[]): {}} 是對象字面量，等效于 new(...args: any[]) => {}，意思是一個能 new 的函數(shù)，返回值類型是 {} 
        function identity<T>(arg: T): T {
        return arg;
    }
    let myIdentity: <U>(arg: U) => U = identity;
    # 等效:
    let myIdentity: {<T>(arg: T): T} = identity;

    # 轉(zhuǎn)換成接口:
    interface GenericIdentityFn {
        <T>(arg: T): T;
    }
    let myIdentity: GenericIdentityFn = identity;

屬性裝飾器

  1. 屬性裝飾器表達式會在運行時當作函數(shù)被調(diào)用，傳入兩個參數(shù)：
    1. 對于靜態(tài)成員來說是類的構(gòu)造函數(shù)，對于實例成員來說是類的原型對象；
    2. 成員的名字；
    function logProp(params:any) {
    return function(target:any, attr:any) {
        console.log(target)  // { constructor:f, getData:f } 
        console.log(attr)  // url
        target[attr] = params;  //通過原型對象修改屬性值 = 裝飾器傳入的參數(shù)
        target.api = 'xxxxx';  //擴展屬性
        target.run = function() {  //擴展方法
            console.log('run...');
        }
    }
}
class HttpClient {
    @logProp('http://baidu.com')
    public url:any|undefined;
    constructor() { }
    getData() {
        console.log(this.url);
    }
}
var http:any = new HttpClient();
http.getData();  // http://baidu.com
console.log(http.api);  // xxxxx
http.run();  // run...

方法裝飾器

  1. 方法裝飾器被應(yīng)用到方法的屬性描述符上，可以用來監(jiān)視、修改、替換方法的定義；
  2. 方法裝飾器會在運行時傳入3個參數(shù)：
    1. 對于靜態(tài)成員來說是類的構(gòu)造函數(shù)，對于實例成員來說是類的原型對象；
    2. 成員的名字；
    3. 成員的屬性描述符；
    function get(params:any) {
    console.log(params) // 裝飾器傳入的參數(shù)：http://baidu.com
    return function(target:any, methodName:any, desc:any) {
        console.log(target)  // { constructor:f, getData:f } 
        console.log(methodName)  // getData
        console.log(desc)  // {value: ?, writable: true, enumerable: false, configurable: true} value就是方法體
        /* 修改被裝飾的方法 */
        //1. 保存原方法體
        var oldMethod = desc.value;
        //2. 重新定義方法體
        desc.value = function(...args:any[]) {
            //3. 把傳入的數(shù)組元素都轉(zhuǎn)為字符串
            let newArgs = args.map((item)=>{
                return String(item);
            });
            //4. 執(zhí)行原來的方法體
            oldMethod.apply(this, newArgs);
            // 等效于 oldMethod.call(this, ...newArgs);
        }
    }
}
class HttpClient {
    constructor() { }
    @get('http://baidu.com')
    getData(...args:any[]) {
        console.log('getData: ', args);
    }
}
var http = new HttpClient();
http.getData(1, 2, true);  // getData: ["1", "2", "true"]

方法參數(shù)裝飾器

  1. 參數(shù)裝飾器表達式會在運行時被調(diào)用，可以為類的原型增加一些元素數(shù)據(jù)，傳入3個參數(shù)：
    1. 對于靜態(tài)成員來說是類的構(gòu)造函數(shù)，對于實例成員來說是類的原型對象；
    2. 方法名稱，如果裝飾的是構(gòu)造函數(shù)的參數(shù)，則值為undefined
    3. 參數(shù)在函數(shù)參數(shù)列表中的索引；
    function logParams(params:any) {
    console.log(params)  // 裝飾器傳入的參數(shù)：uuid
    return function(target:any, methodName:any, paramIndex:any) {
        console.log(target)  // { constructor:f, getData:f } 
        console.log(methodName)  // getData
        console.log(paramIndex)  // 0
    }
}
class HttpClient {
    constructor() { }
    getData(@logParams('uuid') uuid:any) {
        console.log(uuid);
    }
}
  2. 注意：參數(shù)裝飾器只能用來監(jiān)視一個方法的參數(shù)是否被傳入；
  3. 參數(shù)裝飾器在Angular中被廣泛使用,特別是結(jié)合reflect-metadata庫來支持實驗性的Metadata API；
  4. 參數(shù)裝飾器的返回值會被忽略。

裝飾器的執(zhí)行順序

  1. 裝飾器組合：TS支持多個裝飾器同時裝飾到一個聲明上，語法支持從左到右，或從上到下書寫； 
    @f @g x

@f
@g
x
  2. 在TypeScript里，當多個裝飾器應(yīng)用在一個聲明上時會進行如下步驟的操作：
    1. 由上至下依次對裝飾器表達式求值;
    2. 求值的結(jié)果會被當作函數(shù)，由下至上依次調(diào)用.
  3. 不同裝飾器的執(zhí)行順序：屬性裝飾器 > 方法裝飾器 > 參數(shù)裝飾器 > 類裝飾器 
    function logClz11(params:string) {
    return function(target:any) {
        console.log('logClz11')
    }
}
function logClz22(params?:string) {
    return function(target:any) {
        console.log('logClz22')
    }
}
function logAttr(params?:string) {
    return function(target:any, attrName:any) {
        console.log('logAttr')
    }
}
function logMethod(params?:string) {
    return function(target:any, methodName:any, desc:any) {
        console.log('logMethod')
    }
}
function logParam11(params?:any) {
    return function(target:any, methodName:any, paramIndex:any) {
        console.log('logParam11')
    }
}
function logParam22(params?:any) {
    return function(target:any, methodName:any, paramIndex:any) {
        console.log('logParam22')
    }
}

@logClz11('http://baidu.com')
@logClz22()
class HttpClient {
    @logAttr()
    public url:string|undefined;

    constructor() { }

    @logMethod()
    getData() {
        console.log('get data');
    }

    setData(@logParam11() param1:any, @logParam22() param2:any) {
        console.log('set data');
    }
}
// logAttr --> logMethod --> logParam22 --> logParam11 --> logClz22 --> logClz11
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容