TypeScript中的裝飾器用法

更新時(shí)間：2022年06月20日 08:28:13 作者：springsnow

這篇文章介紹了TypeScript中裝飾器的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、裝飾器

裝飾器是一種特殊類型的聲明，它能夠被附加到類聲明，方法，屬性或參數(shù)上，可以修改類的行為。
通俗的講裝飾器就是一個(gè)方法，可以注入到類、方法、屬性參數(shù)上來(lái)擴(kuò)展類、屬性、方法、參數(shù)的功能。
常見(jiàn)的裝飾器有：類裝飾器、屬性裝飾器、方法裝飾器、參數(shù)裝飾器
裝飾器的寫(xiě)法：普通裝飾器（無(wú)法傳參）、裝飾器工廠（可傳參）

裝飾器是過(guò)去幾年中js最大的成就之一，已是Es7的標(biāo)準(zhǔn)特性之一

二、類裝飾器：

類裝飾器在類聲明之前被聲明（緊靠著類聲明）。

類裝飾器應(yīng)用于類構(gòu)造函數(shù)，可以用來(lái)監(jiān)視，修改或替換類定義。傳入一個(gè)參數(shù)

1、類裝飾器:普通裝飾器（無(wú)法傳參）

function logClass(params: any) {

    console.log(params);
    // params 就是當(dāng)前類
    params.prototype.apiUrl = '動(dòng)態(tài)擴(kuò)展的屬性';
    params.prototype.run = function () {
        console.log('我是一個(gè)run方法');
    }

}

@logClass
class HttpClient {
    constructor() {
    }
    getData() {

    }
}
var http: any = new HttpClient();
console.log(http.apiUrl);
http.run();

2、類裝飾器:裝飾器工廠（可傳參）

function logClass(params: string) {
    return function (target: any) {
        console.log(target);
        console.log(params);
        target.prototype.apiUrl = params;
    }
}

@logClass('http://www.itying.com/api')
class HttpClient {
    constructor() {
    }

    getData() {

    }
}

var http: any = new HttpClient();
console.log(http.apiUrl);

下面是一個(gè)用類裝飾器重載構(gòu)造函數(shù)的例子。

類裝飾器表達(dá)式會(huì)在運(yùn)行時(shí)當(dāng)作函數(shù)被調(diào)用，類的構(gòu)造函數(shù)作為其唯一的參數(shù)。

如果類裝飾器返回一個(gè)值，它會(huì)使用提供的構(gòu)造函數(shù)來(lái)替換類的聲明。

function logClass(target: any) {
    console.log(target);
    return class extends target {
        apiUrl: any = '我是修改后的數(shù)據(jù)';
        getData() {
            this.apiUrl = this.apiUrl + '----';
            console.log(this.apiUrl);
        }
    }
}


@logClass
class HttpClient {
    public apiUrl: string | undefined;
    constructor() {
        this.apiUrl = '我是構(gòu)造函數(shù)里面的apiUrl';
    }
    getData() {
        console.log(this.apiUrl);
    }
}

var http = new HttpClient();
http.getData();

三、屬性裝飾器

屬性裝飾器表達(dá)式會(huì)在運(yùn)行時(shí)當(dāng)作函數(shù)被調(diào)用，傳入下列2個(gè)參數(shù)：
1、對(duì)于靜態(tài)成員來(lái)說(shuō)是類的構(gòu)造函數(shù)，對(duì)于實(shí)例成員是類的原型對(duì)象。
2、成員的名字。

//類裝飾器
function logClass(params: string) {
    return function (target: any) {
        // console.log(target);
        // console.log(params);       

    }
}

//屬性裝飾器
function logProperty(params: any) {
    return function (target: any, attr: any) {
        console.log(target);
        console.log(attr);
        target[attr] = params;
    }
}
@logClass('xxxx')
class HttpClient {
    @logProperty('http://itying.com')
    public url: any | undefined;
    constructor() {
    }
    getData() {
        console.log(this.url);
    }
}
var http = new HttpClient();
http.getData();